1.设置全屏
<meta name="apple-mobile-web-app-capable" content="yes"/><!--删除苹果默认的工具栏和菜单栏-->
<meta name="x5-fullscreen" content="true"><!--QQ强制全屏-->
<meta name="fullscreen" content="yes"><!--UC强制全屏-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><!--控制状态栏显示样式,content中为颜色-->
<meta name="browsermode" content="application"><!--应用模式,页面将默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示-->
<meta name="x5-page-mode" content="app" /><!--QQ应用模式-->
<meta name="360-fullscreen" content="true" /><!--360强制全屏-->
2.禁止触摸滚动事件(@touchmove.prevent)
<div @touchmove.prevent></div>
3.overflow: hidden禁止滚动在移动端没有效果
在body上添加overflow: hidden后,再在需要禁止滚动的父级元素上加overflow: auto;可生效,原因暂未查明。
4.HTML元素的 font-size,在移动端设置HTML元素的font-size值;页面元素的font-size单位用rem,可统一设置字体大小;
html {font-size: 62.5%; /10 ÷ 16 × 100% = 62.5%/}
大多数浏览器的默认字号是16px,因此1rem=16px,这样不方便我们px和rem的换算,假设1rem=10px,那么100px=10rem,25px=0.25rem。这样就好换算很多,于是就有了上面的10/16。
如果是640的设计稿,需要除以2转化为和iphone5屏幕等宽的320。所以设计稿px单位/2/10转为rem。之后再媒体查询设置每个屏幕大小的font-size百分比,页面会根据上面设置的根font-size适配。