移动端页面开发常用的知识点_html/css_WEB-ITnose-html教程-PHP中文网

移动端页面开发常用的知识点_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:36:14

原创

1597人浏览过

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 属性，在网页加载时隐藏地址栏与导航栏。
想了解这些属性，请查看链接：
如图:

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

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

立即学习“前端免费学习笔记（深入）”；

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

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

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

查看详情

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/

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