今天总结一下在写手机移动端页面时的一些注意事项。在写手机移动端页面时,我们有时候会稀里糊涂的遇到一些坑。同时手机页面的一些展示和我们pc端页面的展示是有一些区别的。
一、书写移动端时需注意的meta
标签
1. 第一个标签(最重要的标签)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width=(number || device-width) -设置文档的宽度,device-width表示文档宽度等于设备宽度,在安卓下对number 值得设置支持不是太好
initial-scale:() - 初始的缩放比例
minimum-scale:() - 允许用户缩放到的最小比例
maximum-scale:() - 允许用户缩放到的最大比例
user-scalable:(yes || no) - 用户是否可以手动缩放 ios10 无效
2.去掉手机数字和邮箱的识别功能
<meta name="format-detection" content="telephone=no,email=no">
如果你想想让用户拨打电话或发送邮箱可以这样做:
<a href="tel:13288888888">13288888888</a>
<a href="email:13288888888@163.com">13288888888@163.com</a>
3.QQ强制竖屏或横屏显示(x5内核浏览器中有效)
<meta name="x5-orientation" content="portrait || landscape">
x5内核的浏览器:QQ浏览器,微信和qq内置浏览器
4.QQ设置全屏显示
<meta name="x5-fullscreen" content="true">
5.UC强制竖屏或横屏显示
<meta name="screen-orientation" content="portrait || landscape">
6.UC全屏显示
<meta name="full-screen" content="yes">
7.WebApp全屏模式:伪装app,离线应用。
启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" />
隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题">
需要注意的是:以上我测试,目前只在safir浏览器下有效,并且要先添加该网页为书签到桌面,在点击访问时生效。
二、书写移动端时需注意的css 样式
1.清除(设置)点击a标签时的高亮颜色
-webkit-tap-highlight-color:颜色
手机端我们用a 标签包裹的内容,默认点击时有高亮颜色
2.消除按钮圆角
-webkit-appearance:none;
清除手机端按钮默认的圆角。清除后还是有些圆角样式,我们可以在加border-radious:0;
可以彻底清除
3.选中文字设置(部分手机上有效果,安卓手机似乎有问题)
-webkit-user-select:none;
去除掉长按文字时选中文字的样式。
4.禁止文字缩放
-webkit-text-size-adjust:100%;
在手机横竖屏时,用于禁止文字缩放,用处也不是很大
三、书写移动端时的一些坑
1.Font Boosting 问题
在一段文字我们没有给他设置高度的时候,在webkit 内核下,文字的大小被浏览器放大了。
解决方法:
①设置高度
②设置最大高度(max-height)
2.Fiexd 问题
在手机端支持不是太好,有时候,将头部固定到最上边,滚动页面时,可能会出现抖动现象。尽量不要使用。
3.IOS的body的overflow 问题
在ios 下如果给body一个overflow:hidden
页面不起作用,并没有将元素超出的部分隐藏。
解决方法:
在最外层包裹一个div,将overflow:hidden
设置在这个div上。
四、移动端的适配
1.百分比适配
这个方法我不在多讲,我门都知道,将元素宽度设置成百分比,页面可以根据屏幕尺寸的变化而变化。但是这里有一个问题是,我们的宽度可以自适应,但是高度并没有随着手机屏像素的变化而变化。
2.viewport适配(目前我在X5内核的手机浏览器上测试有问题)
第二种方法是利用viewport
来 将屏幕窗口宽度设置成一致的。这里我们可以动态添加<meta>
标签来设置。
注意:上边我们已经说了width=(number || device-width)
因为在安卓下部分机型会有问题,所以我们这里不能动态控制它,我们而是动态的控制屏幕的缩放。
var width = window.screen.width; // 获取屏幕宽度
var targetW = 320; // 定义y我们想要设置的宽度
var scale = width/targetW; // 计算我们要缩放的比例
//创建动态 <meta>标签
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = "user-scalable=no,initial-scale="
+ scale
+ ",minimum-scale="
+ scale
+ ",maximum-scale="
+ scale ;
document.head.insertBefore(meta,document.head.firstChild);
这时我们要将四个div并排一列,我们可以不用使用百分比平分,我们可以直接书写px 值。这时我们如果实现四个div并排排列,我们直接计算,320px 等分四份,给每个div设置80px即可。
HMTL:
<div class="warp">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
body{margin:0;font-family: Helvetica;}
.warp{
width:100%;
}
.warp div{
float: left;
width:80px;
height:100px;
}
.warp div:nth-of-type(1){
background:red;
}
.warp div:nth-of-type(2){;
background:blue;
}
.warp div:nth-of-type(3){
background:yellow;
}
.warp div:nth-of-type(4){
background:green;
}
其他知识点: 手机上有一个像素比 devicePixelRatio
这个像素比是因为手机像素目前已经很高了,相对于pc端,手机尺寸是很小的,的是像素取并没有效太多,在一个小尺寸上显示很多像素,就会出现一个元素在电脑端显示正常,到手机上显示会很小。为了让其在手机上显示的比较正常,手机会有一个像素比,将元素的每一个像素按像素比去放大。
window.devicePixelRatio // 只读
每一个手机的像素比并不是都相同的。
3.使用rem去做适配
这里你应该需要了解rem做单位和em作单位的区别。如果你还不知道,可以去看看我以前的文章:http://blog.csdn.net/webxiaoma/article/details/53431457
使用rem做适配,来实现上面的效果,我们可以动态的设置根元素的字体大小。
下面我来具体说一下:
①首先,比如我们拿到一个移动端设计稿。设计稿的宽时 750px
②我们将移动端屏幕宽等分成15份,作为根节点字体;每一份其1rem
,整屏也就是15rem
var width = window.screen.width; //获取移动端屏幕宽度
document.documentElement.style.fontSize = width/15 + "px"
③要想将750px设计稿完全展示在移动端屏幕上,那么750px 的设计稿也分成了15份,没份是50px, 对应的一个50px 就是一份,也就是 1rem
,
④如果我们在设计稿上量的100px,那它换算成rem 就是 100除以50,也就是 2rem
⑤也就是每次我们从设计稿上量的像素除以50就是应写的rem;
如果上面的例子你看懂了,你可能会说,每次我们量出像素后,都要去就算会很麻烦。这里我推荐使用less 或 sass。
比如使用less:
@w:50rem;
.div{
width:750/@w;
height:100/@w;
}