搬动端页面开发常用的知识点

移动端页面开发常用的知识点

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 标签的属性中，比如：

但是：苹果在 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/

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

搬动端页面开发常用的知识点

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

2.屏幕设备旋转判断

相关推荐