移动端页面开发常用的知识点_html/css_WEB-ITnose
程序员文章站
2022-04-23 10:55:01
...
1.head直接添加一下js代码:viewport标签
minimal-ui:iOS 7.1 的 Safari 为 meta 标签新增 minimal-ui 属性,在网页加载时隐藏地址栏与导航栏。
想了解这些属性,请查看链接:
如图:
在过去,用 Safari 打开一个网页后是这样的:
始终强调人性化设计的苹果当然注意到了这点,于是在 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。
如何实现?你只需将 “minimal-ui” 加入 viewport meta 标签的属性中,比如:
但是:苹果在 iOS 8 中移除了 'minimal-ui',可能的原因是页面内容不应该能够控制系统的 UI。
2.屏幕设备旋转判断
原来屏幕设备旋转判断用js来判断其页面的宽高比例,但是其实css也可以完成这样的功能
为了更好的体验,请使用竖屏浏览
css样式:
@-webkit-keyframes rotation { 10% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg) } 90% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 100% { transform: rotate(90deg); -webkit-transform: rotate(90deg) }}@keyframes rotation { 10% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg) } 90% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 100% { transform: rotate(90deg); -webkit-transform: rotate(90deg) }}#orientLayer { display: none;}@media screen and (min-aspect-ratio: 13/8) { #orientLayer { display: block; width:100%; height:100%; }}.mod-orient-layer { display: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: #333; z-index: 9997}.mod-orient-layer__content { position: absolute; width: 100%; top: 45%; margin-top: -75px; text-align: center}.mod-orient-layer__icon-orient { background-image: url(../images/icon-orient.png); display: inline-block; width: 67px; height: 109px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out; -webkit-background-size: 67px; background-size: 67px}.mod-orient-layer__desc { margin-top: 20px; font-size: 15px; color: #fff}
当屏幕横屏的时候会有如下的效果:
后面陆续添加。。。
作者:风雨后见彩虹
出处:http://www.cnblogs.com/moqiutao/
如果您觉得本文对您的学习有所帮助,请多支持与鼓励。
推荐阅读
-
整理HTML5移动端开发的常用触摸事件
-
HTML5移动端开发中的Viewport标签及相关CSS用法解析
-
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
-
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
-
详解移动端Html5页面中1px边框的几种解决方法
-
常见的移动端H5页面开发遇到的坑和解决办法
-
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
-
小强的HTML5移动开发之路(47)——jquery mobile基本的页面框架
-
vue移动端html5页面根据屏幕适配的四种解决方法
-
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法