做过挪动端网页的都晓得，在一些高要求的挪动网页上处理Iphone5、6、6p的屏幕适配题目上花了不少工夫，但有时刻照样不尽惬意，种种装备上显现另有轻微有一点差异的。

我曾今也尝试了许多方法，也参考了他人加的思绪，有的用js，有的用媒体查询，有的用一些比较新的单元rm、rem等等…… 我以为照样很贫苦，岂非就没有一个能够一行代码处理题目的计划吗？经由我种种的尝试以后终究有了，现在阶段还没发明bug，如果有题目，还请不吝赐教!

<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no" />

置信这一段代码是在挪动端上必需的一段，也许的意义人人也都晓得

• width=device-width：让宽度=装备缩放以后的宽度，就是320、360、375、414这些。

• initial-scale=1：初始化的缩放比例1，这个属性和css中transform: scale(1);有异曲同工之妙。

• minimum-scale=1：最小缩放比例，相当于你给div设置mix-height一样，带有限定。

• maximum-scale=1：最大缩放比例，同上，不说了。

• user-scalable=no：是不是许可用户运用双指举行缩放，（默许不许可）。

看了这些，我就想 width=device-width 我就不能设置一个牢固值吗？width=320， 经由我的测试，发明是能够的。

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

哈哈哈！ 圆满处理，经由我历久的试验，这里有一个坑，就是 width=牢固宽度 以后是不能写 initial-scale=1 的，（写了以后在有些浏览器中不可，所以发起不写）。

末了附一个1px极细边框线的教程。大多数的前端的设计图应当都是640或许720的宽度，当我们写border:1px的时刻，实际上是物理类似2px，这类状况日常平凡做直线的时刻委曲能够敷衍，transform: scaleY(0.5);如许看起来就洗了许多，然则做圆角的按钮的时刻就力不从心了，而且大批运用transform 的代码也不是很文雅，这个时刻我们能够

如许：

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

你没看错，就是640，和设计图的尺寸如出一辙，每次大的值都不用在除以2了，有的时刻 一个 25px除以2的时刻就是不是还在纠结是写12px呢照样13px呢？ 如许写的 网页完成在手机上运转的结果看起来会细致许多。

看到有许多同砚面临这个的一些题目，我这里更新一点，都以为不能悉数实用，我这里谢了一个demo，放在了个人网站上，有兴致的同砚能够研讨下， 能够在chrome浏览器中模仿挪动装备，也能够用手机翻开这个网站， 发起用手机翻开，毕竟chrome浏览器没法模仿手机的物理1px. demo地点 http://demo.yuanyuanyuan.me/v…