1. 手机前端页面尺寸
iPhone手机网页的设计尺寸
iPhone5尺寸是640x1136px分辨率是326PPI
iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI
安卓网页的设计尺寸
320dp：一个普通的手机屏幕（240X320，320×480，480X800）
480dp：一个中间平板电脑像（480×800）
600dp：7寸平板电脑（600×1024）
720dp：10寸平板电脑（720×1280，800×1280）
ipad网页的设计尺寸
iPad第三代第四代尺寸是2048x1536px分辨率是264PPI
iPad第一代第二代尺寸是1024x768px分辨率是132PPI
iPad Mini尺寸是1024x768px分辨率是163PPI
以上是移动端的尺寸，单独的如果某一个移动的网站的尺寸是没有的，因为移动网站的一半情况是按照%比的尺寸 来自动适应屏幕的大小，或者也通过设置，iphone执行什么尺寸，安卓情况执行什么尺寸的。
2. PHP上传图片，前端展示大小统一问题
有两种做法：
方法一：通过后台为图片生成展示时需要的缩略图。
在图片上传的时候，创建一个宽度为100，高度为120的真彩色图像，并且将背景设置为透明，然后按照原始图像比例，将原始图像拷贝到这个真彩色画布上，这里需要计算拷贝的图像的大小，使图像宽度不超过100，高度不超过120，并且位于真彩色画布的正中间，那么前台只需要显示这个缩略图就可以了。
方法二：通过CSS+JS实现。
利用JS代码重新设置图像的显示大小，让其按比例自动适应，宽度不超过100，高度不超过120，但是这个时候图像不是位于正中间的，还需要使用CSS样式对齐定位，让它水平和垂直方向都居中。
3. 一般做网页设计背景尺寸定多大
网页的背景多大要看对网页的要求的。
网页设计标准尺寸：
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话，高度是612-615之间，就不会出现水平滚动条和垂直滚动条。
为了做到主题鲜明突出，要点明确，应该使配色和图片围绕预定的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。
专业的网页设计，需要经历以下几个阶段：
需要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，从而建立起营销模型。
以业务目标为中心进行功能策划，制作出栏目结构关系图。
以满足用户体验设计为目标，使用axure rp或同类软件进行页面策划，制作出交互用例。
以页面精美化设计为目标，使用PS、AI等软件，调整，使用更合理的颜色、字体、图片、样式进行页面设计美化。
根据用户反馈，进行页面设计调整，以达到最优效果。
以上内容参考：网络-网页设计
4. web前端怎么让div大小刚好和图片一样大
在前端开发过程中，我们经常会遇到盒子大小跟图片尺寸不匹配的情况，我们通常会通过以下几种方式来解决。
1.通过采用裁剪图片，根据div盒子设置的宽、高，来更改裁剪图片的尺寸，使图片适配div盒子。
2.设置div的具体宽高，图片宽高分别设置为100%，代码具体如下width:100%;height:100%。这种方式，也可以将图片大小填充满盒子。
3.如果图片是网页背景图片，还可以通过设置div盒子内属性background-size为cover，这种方式也可使图片充满盒子。
我们在实际运用中，可以根据不同情况来选择不同图片调整方式。
5. 移动端网页设计尺寸标准
涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。那么大家知道移动端网页设计尺寸标准是多少呢?下面一起来看看!
现象
首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
像素密度
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。
所以，我们要引入最重要的一个概念：像素密度，也就是PPI(pixels per inch)。这项指标是连接数字世界与物理世界的桥梁。
Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
倍率与逻辑像素
再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。
在现实中，这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。
在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。
由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率(iPhone 6plus除外，它达到了3倍)。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。
Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。
如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率：
ldpi [0.75倍]
mdpi [1倍]
hdpi [1.5倍]
xhdpi [2倍]
xxhdpi [3倍]
xxxhdpi [4倍]
各型号iPhone的倍率比较简单，我们后面会讲到。那么Android手机那么多，具体怎么分?哪些手机是几倍的倍率呢?我们先看一张表，这是友盟2014年10月到2015年03月的数据：
就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：
ldpi 如今已绝迹，不用考虑
mdpi [320x480](市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小)
hdpi [480x800、480x854、540x960](早年的低端机，屏幕在3.5英寸档位;如今的低端机，屏幕在4.7-5.0英寸档位)
xhdpi [720x1280](早年的中端机，屏幕在4.7-5.0英寸档位;如今的中低端机，屏幕在5.0-5.5英寸档位)
xxhdpi [1080x1920](早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上)
xxxhdpi [1440x2560](极少数2K屏手机，比如Google Nexus 6)
自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。
不过需要注意的是，Android设备的'逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和1080x1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320x533和360x640。很显然，后者更宽更高，能显示更多内容。所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。
单位
不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。
单位之间的换算关系随倍率变化：
1倍：1pt=1dp=1px(mdpi、iPhone 3gs)
1.5倍：1pt=1dp=1.5px(hdpi)
2倍：1pt=1dp=2px(xhdpi、iPhone 4s/5/6)
3倍：1pt=1dp=3px(xxhdpi、iPhone 6)
4倍：1pt=1dp=4px(xxxhdpi)
单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。
无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。
Web怎么办
移动端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app一样。由于像素密度是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器。前端技术可以善加利用设备的像素密度，只需一行代码，浏览器便会使用app的显示方式来渲染页面。根据像素密度，按相应倍率缩放。
以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作页面时，只需要按照基准倍率来就行了。无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，才能保证清晰。
实际应用
大家最关心的还是实际运用，画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前，我要为使用PS进行设计的朋友介绍一个小技巧。
之前我说过，我们要以逻辑像素尺寸来思考界面。体现到设计过程中，就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点(Point)。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。当然，各平台单位名称还是要记住的。这里我们用的只是它的原理，不用在意名称。
要调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300。为什么是这两个数字?
首先说300，这和人眼的分辨能力有关。由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度。之前说过，这就是像素密度，也就是DPI。DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。相反，DPI只有10的话，在你一个食指指节大小的长度内只有10个像素，这明显就是马赛克了。所以印刷品要设成300，才能保证清晰。
再说72，这有一定的历史原因。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。
现在回到正题，我们怎么通过DPI来调节倍率?既然屏幕本身的分辨率是72，DPI设成72刚好是1倍尺寸，那设成72的两倍就是倍率为2的屏幕了，就这么简单。
下面来看看3个平台各自的画布设置：
iPhone
iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。
从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。
按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。
不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。
Android
都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。
对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。
当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。
Web
手机端网页就没有统一标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。
这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。
如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414x736。
总结
移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。
6. 前端10mb是多大的图片大吗
10mb只是这个图像文件的大小，不能确定这个图片的尺寸大小 因为图片格式不同大小也会不一样，在就是该图片是否压缩过，那大小也会相差很多。
7. h5页面制作，设计多大的尺寸，怎么和前端适配，实现设计的视觉稿效果
H5的页面制作设计尺寸是有一定规范的，正常的话是考虑手机的适配问题，所以这个尺寸的话是基于手机来做的。
具体是多少呢？因为手机的尺寸是不一样的，特别是在比例上，这就要求我们在不同的手机上必须要保证内容的呈现，一定是完整的，但自己要考虑一个问题，要把内容分为重要的和不重要，重要的是什么呢，比如说背景图；重要的话就是放一些文字信息等等。
这样就划分了一个安全区和出血区，出血区和安全区交界的部分，就是不重要的，可以在各位手机上被裁掉的或者用来遮住手机页面背景的；但是安全的内容，是可以保证在任何大小屏幕手机上都可以完整显示。
一般安全区内框的尺寸是375X603PX，但在制作上又是另外一回事了，作铺满内框的图要按照这个尺寸的2倍大小去做。
出血区也就是外框尺寸是422X748PX，作铺满外框的图要按照这个尺寸的2倍大小去做。
这个你可以参考下意派Epub360的画布标准，这个工具是专业级的H5工具。
8. 移动端的h5页面的尺寸是多少
近来，大尺寸手机屏幕日趋主流，意派Epub360根据对主流大屏的计算，现新增大尺寸手机屏幕的画布，并命名为“微信Plus”。原来的普通微信尺寸将继续保留。
内容安全区：375*603（750*1206）
出血区：422*748（844*1496）
左右边框各：23.5px
上下边框各：72.5px
根据该画布，后续将会推出配套的layer组件等尺寸，即当选择使用该微信尺寸时，layer画布跟layer容器尺寸自动默认尺寸：375X603PX，方便调整。
9. web前端，一张图片的实际尺寸为1334×662，屏幕分辨率比这张图片还高，前端如何设计铺满整个屏幕的
一般是这样的，
假设屏幕和图片宽度比 大于高度比 应该设置图片高度为屏幕高度，然后宽度等比拉伸并且居中；
假设屏幕和图片宽度比 小于高度比 应该设置图片宽度为屏幕宽度，然后高度等比拉伸并且居中；
10. 前端基础：viewports理解、页面各种宽度理解
关于viewports以前一直都是知道个大概但是一直没有详细去了解，加上最近在项目中遇到了比较近点的1像素问题，就乘着这个机会再加深一下印象回顾一下基础。
screen.width/height
含义：用户的屏幕的完整大小。
度量：设备的pixels。
意思就是用户屏幕的物理宽度，它们的值不会随着用户的缩放而改变：它们是显示器的特征，而不是浏览器的特征。换句话说是屏幕出厂的时候就决定了的
window.innerWidth/Height
含义：包含滚动条尺寸的浏览器完整尺寸
度量：CSS的pixels
document.documentElement.clientWidth/Height
含义：viewport尺寸：浏览器窗口尺寸。
度量：CSS的pixels
随浏览器大小变化而变化，但宽度不包含滚动条宽度。具体请看图一比较两者的差别。
viewport的功能在于控制你网站的最高块状（block）容器：<html>元素。怎么理解这句话呢？
假设定义了一个可变尺寸的布局（liquid layout），且你定义一个侧边栏的宽度为width: 10%。当你改变浏览器窗口大小时，该侧边栏会自动扩张和收缩。这是什么原理呢？
技术上讲，原理是侧边栏的宽度为它父元素宽度的10%，我们设它的父元素是body，且你未指定宽度。那么问题就变为了<body>的宽度到底是多少？
通常，一个块级元素占有起父元素的100%的宽度（这里有异常情况，暂时忽略）。所以<body>的宽度就是其父元素<html>的宽度。
那么<html>元素到底有多宽？
<html>的宽度受viewport所限制，<html>元素为viewport宽度的100%。,因为它的宽度恰好为浏览器的宽度。所以你的侧边栏宽度width: 10%会占用10%的浏览器宽度。
反过来，viewport是严格的等于浏览器的窗口：定义就是如此。viewport不是一个HTML的概念，所以你不能通过CSS修改它。它就是等于浏览器窗口的宽度高度 –—— 在桌面浏览器上如此，移动设备浏览器上有点复杂。
注意：当我们设置html上面手动的设置了宽度，在那种情况下document. documentElement. clientWidth/Height依然给出了viewport的尺寸，而不是<html>元素。
比如 我手动设置html的样式为
html {width：2000px;height: 2000px;}
通过document. documentElement. clientWidth/Height 获取到的值只会是viewport的大小，而不是html元素的大小 2000px;
所以document. documentElement. clientWidth/Height只会给出viewport的尺寸，而不管<html>元素尺寸如何改变。
document. documentElement. offsetWidth/Height
含义：<html>的尺寸
度量：CSS的pixels
如果clientWidth/Height一直用以标示viewport的尺寸，我们该如何去获取<html>元素的尺寸呢？通过document.doucmentElement.offsetWidth/Height来获取html的宽度。
像上面的那个例子，这个就会返回2000px;
含义：页面的移位
度量：CSS的pixels
window.pageXOffset 和 window.pageYOffset，定义了页面(document)的相对于窗口原点的水平、垂直位移。因此你能够定位用户滚动了多少的滚动条距离.
对应viewport我们现在普遍理解为两种视图:
1.visualviewport：window.innerWidth/Height定义 包含滚动条
2. layoutviewport: document.documentElement.clientWidth/Height 不包含滚动条
在理解这两种viewport之前，我们先认识理解这几个名词的意思：首先我们要记住： 1 px 就一个像素点
iphone 默认viewport 是980
vw：是Viewport's width的简写,1vw等于window.innerWidth的1%
vh：和vw类似，是Viewport's height的简写，1vh等于window.innerHeihgt的1%
vmin：vmin的值是当前vw和vh中较小的值
vmax：vmax的值是当前vw和vh中较大的值
1. 像素密度 ：每英寸可以显示的像素点的数量，像素密度越大，表示在同样的尺寸里面，像素点越多
比如：iphone 3 的屏幕像素是320x480,iphone4s的屏幕像素是640x960，刚好两倍，然而两款手机都是3.5英寸的。
1英寸是一个固定长度，等于2.54cm。 像素密度越高，代表屏幕显示效果越精细。 Retina屏比普通屏清晰很多，就是因为它的像素密度高。
2.像素： 可以分为物理像素和CSS像素
物理像素（device independent pixels ）： 物理像素也叫设备像素，任何设备的物理像素是固定不变的。比如我的笔记本的分辨率是1366 * 765，表示的就是宽度上最多容纳1366个物理像素点，高度上最多容纳765个物理像素点
CSS像素（CSS pixels ）：CSS像素也叫逻辑像素，是为web开发创造的。通常情况下，在桌面端，CSS像素的大小和设备像素的大小是相等的，即一个CSS像素完全覆盖了一个设备像素。如下图
但是在手机端，我们都知道网页可以通过手指进行缩放，这时候CSS像素也会改变
缩小操作 ：当用户进行缩小操作时，一个物理像素覆盖了多个CSS像素。图中深蓝色表示物理像素，半透明的浅蓝色表示CSS像素
当用户进行放大操作时，一个CSS像素覆盖了多个物理像素 ： 这里的一个css像素就不在等于一个物理像素了。当缩小两倍的时候，两个css像素相当于一个物理像素。
DPR
DPR（devicePixelRatio）指的是设备像素比，即网页在不进行缩放使，设备像素和CSS像素的比值
DPR = 设备像素 / CSS像素(某一方向上)
从iphone4开始，苹果公司推出了retina视网膜屏幕，这种技术在屏幕大小不变的情况下，屏幕像素密度提高了一倍，分辨率自然也提高了一倍，于是DPR等于2
通过JS的screen.width和screen.height属性，可以获取屏幕的CSS像素
通过JS的window.devicePixelRatio属性，可以获取屏幕的DPR值
以iphoneX为例，css像素（设备独立像素）为375px * 812px，DPR是3，可以计算出设备像素（物理像素）是1125px * 2436px
屏幕分辨率
屏幕分辨率就是设备像素，一般以纵向像素 * 横向像素来表示分辨率。比如iphoneX的设备像素是1125px * 2436px，分辨率也就是1125px * 2436px
在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素（某一方向上相当于1个css像素对应2个物理像素。）。
比如：
在普通屏中 我设置一个div的样式 width：100px ( 100px=100个物理像素。) ，当我将这个样式放在了Retina的屏幕（dpr=2）上的时候，发现变的更加清晰了。这是我们由于两个屏幕的像素密度不一样的结果，后者的像素密度是前者的两倍，所以在100px的css像素中的距离里面就存在了200个物理像素。但是两个展现的效果是一样的（CSS像素所呈现的物理尺寸是一致的。）,只是里面的像素点的数量不同。
同时：visualviewport还是显示100px 但是对于layoutviewport来说就相当于200px。 因为layoutviewport表示的是物理像素。
但是对于图片来说：
在普通屏幕下，1个位图像素对应着1个物理像素，图片可以完美的显示。可是在retina屏幕下，1个位图像素对应着4个物理像素，由于位图像素不可以再分割，所以图片就会只能就进取色，导致图片模糊。
如何来处理这个问题呢。比如一个200 x 300的图片，如果想在retina屏幕上清晰显示的话，就要提供一个400 x 600的2倍图片（@2x），这样的话，1个位图像素就会对应上retina屏上的1个物理像素。图片就不会模糊啦。
说明：retina屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。
在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2
//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px
.css{font-size:20px}
initial-scale这个缩放初始值是相对于设备的idea viewport的值进行缩放的，也就是说
<meta name="viewport" content="initial-scale=1">
//等效于
<meta name="viewport" content="width=devive-width"
//两者各有一个bug，所以生产时最好将两个一起写上
但如果同时出现width和initial-scale
<meta name="viewport" content="width=500, initial-scale=1">
并不是根据先后顺序比较，而是通过谁大取谁，比如设备是iphone5，idea viewport是320px，则此时initial-scale=1(320px)，所以此时viewport取width=500
关于initial-scale缩放的默认值以及其理论
visual viewport宽度 = idea viewport宽度 / 当前设置的缩放值
当前缩放值 = idea viewport宽度 / visual viewport宽度
注：这个理论不适合安卓原生浏览器
参考文章：
再聊移动端页面的适配： https://www.w3cplus.com/css/vw-for-layout.html 阅读码：475709
使用Flexible实现手淘H5页面的终端适配： https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.htm l 阅读码：487741
viewports剖析 https://www.w3cplus.com/css/viewports.html
移动web开发-理解设备像素、CSS像素、DPR - 羊先生
解惑好文：移动端H5页面高清多屏适配方案 - CocoaChina_一站式开发者成长社区