你的位置:首页 > 网页设计

[网页设计]移动端页面开发常用的知识点

1.head直接添加一下js代码:viewport标签

 <script>    var phoneWidth = parseInt(window.screen.width);    var phoneScale = phoneWidth/640;    var ua = navigator.userAgent;    if (/Android (\d+\.\d+)/.test(ua)){      document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');    } else {      document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi" minimal-ui>');    }  </script>

minimal-ui:iOS 7.1 的 Safari 为 meta 标签新增 minimal-ui 属性,在网页加载时隐藏地址栏与导航栏。
想了解这些属性,请查看链接:http://www.cnblogs.com/moqiutao/p/4841234.html
如图:

在过去,用 Safari 打开一个网页后是这样的:

始终强调人性化设计的苹果当然注意到了这点,于是在 iOS 7.1 的 Safari 中为 meta 标签新增 minimal-ui 属性,让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。

如何实现?你只需将 “minimal-ui” 加入 viewport meta 标签的属性中,比如:

<meta name="viewport" content="minimal-ui">

但是:苹果在 iOS 8 中移除了 'minimal-ui',可能的原因是页面内容不应该能够控制系统的 UI。

 

2.屏幕设备旋转判断

原来屏幕设备旋转判断用js来判断其页面的宽高比例,但是其实css也可以完成这样的功能

 

<!--屏幕设备旋转判断开始--><div id="orientLayer" class="mod-orient-layer">  <div class="mod-orient-layer__content"><i class="icon mod-orient-layer__icon-orient"></i>    <div class="mod-orient-layer__desc">为了更好的体验,请使用竖屏浏览</div>  </div></div><!--屏幕设备旋转判断结束-->

 

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/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。