移动端学习笔记（一）

viewport：视口（可视区窗口）

默认不设置viewport一般可视区宽度在移动端是980

width：可视区域的宽度（number || device-width）

user-scalable：是否允许用户缩放，如果user-scalable = no，则说明不可以缩放 user-scalable = yes，允许用户缩放（iOS10无效）

initial-scale：初始缩放比例

minimum-scale：最小缩放比例

maximum-scale：最大缩放比例

像素比：window.devicePixelRatio（把一个像素，放大至N个像素去显示，N就是像素比，设计图至少要750）

<meta name="x5-orientation" content="portrait|landscape">  // 在x5内核的浏览器下，可以竖屏或者横屏的切换（x5浏览器的有qq浏览器，微信）仅限于x5下

<meta name="x5-fullscreen" content="true">  // 全屏显示，仅限于x5下

<meta name="screen-orientation" content="portrait|landscape">  // UC浏览器下可以控制竖屏或者横屏的切换，仅限于UC浏览器

<meta name="full-sreen" content="yes">  // 全屏显示，仅限于UC浏览器

<meta name="format-detection" content="telephone=no,email=no">  // 禁止拨打电话号码和发送邮箱

如果真的有需要拨打电话的地方，可以写<a href="tel:[phone]">请拨打电话：[phone]</a>（tel：中的号码要写准确，因为最后拨打出去的电话是以 href 中的电话为准）

如果真的有需要发送邮件的地方，可以写<a href="mailto:[e-mail]">发送邮件至：[e-mail]</a>

移动的默认样式：

默认字体设置：Helvetica

清除点击的阴影：-webkit-tap-highlight-color

消除按钮圆角：-webkit-appearance ，如果想彻底消除圆角，还要加上border-radius：0；

禁止文字缩放：-webkit-text-size-adjust：100%

选中文字设置：-webkit-user-select：none（不可以选中文字，有兼容问题）

body{font-family:Helvetica;/*移动端的默认字体*/}a,input,button{-webkit-tap-highlight-color:rgba(0,0,0,0);/* 清除点击的阴影，同时也可以设置阴影 */}input,button{ -webkit-appearance:none;/*消除按钮的圆角*/  border-radius:0;}

<a href="#">hello word</a><input type="button" value="按钮">

Font Boosting 在一段文字我们没有给他设置高度的时候，在webkit内核下，文字的大小被浏览器放大了

解决办法：1.设置高度     2.如果是用户自己编辑的文字，那么就不好设置固定的高度，只能设置最大高度 min-height

解决横向滚动条，在iOS中，如果给body设置overflow：hidden，那么文字超出屏幕的范围时，仍会出现滚动条，我们需要给文字部分加一个外层容器，使其overflow：auto，并且给body加上position：relative

移动端中，百分比的写法，让四个盒子在同一水平面显示：（这种写法，盒子字不同设备下，也就是在不同的分辨率下，显示的大小是不一样的）

<meta name="viewport" content="width=device-width,user-scalable=no">

*{margin: 0;padding:0;list-style:none;}div{width: 25%;height: 100px;float: left;}div:nth-of-type(1){background: red;}div:nth-of-type(2){background: yellow;}div:nth-of-type(3){background: green;}div:nth-of-type(4){background: red;}

<div></div><div></div><div></div><div></div>

viewport的写法：

(function(){    var w = window.screen.width;    var targetW = 300;    var scale = w/targetW;    var meta = document.createElement('meta');    meta.name = "viewport";    meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+"";    document.head.appendChild(meta);})();