学习笔记之移动端问题

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适配。