问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
现在拿到的移动端设计稿是width是640px。
假如一个按钮，实际测出来是120px 的width，那么我写在网页中的width：120px？
实际效果在网页中显示的按钮很大，不协调。
=================================
我已经看过有关物理分辨率和逻辑分辨率的一些知识，用chrome的模拟手机端模拟出s4的分辨率是360*640，现在怎么根据设计稿来定一些控件的大小呢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：互联网从业者一名。
&&&|&Powered by
在平时做手机端H5网页设计稿时，UI设计师和前端工程师肯定会纠结过：那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了，设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。
在上篇文章中，我介绍了设备独立像像素、CSS像素和屏幕物理像素之间的关系。那么在前端布局（viewport设定content=”width=device-width”）时，样式尺寸就可以用设备独立像素（设备独立像素从数字上等同于CSS像素）的尺寸范围来进行设定各个元素的大小。
那么从上面所得出的结论，是否就可以断定设计稿直接按照设备独立像素来定就行了呢？且看下面的分析。
（以下所有讨论均将viewport设定为content=”width=device-width”的情况下）
根据目前市场流行的手机移动终端，统计他们的设备独立像素。
从&统计的大部分手机独立像素数据（iPhone6+采用了分辨率降频处理）。&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&表1
从表1可以看出，目前已知智能手机设备独立像素最大的就是iPhone6+的414x736，那么简单来说，将设计稿做成414x736（9:16），就可以在所有手机浏览器上显示完全，不会出现底部空白的情况。
（tips：屏宽414px是为了图片在手机浏览器中显示时，能够向下兼容，在独立像素低于414px的设备上，图片是被压缩的肯定能显示清楚，如果图片宽度为320px，那么在iPhone6+上，图片便会被拉伸，肯定会模糊。高度用736px，是因为9:16的屏幕在相同宽度下，能够显示更多的内容，如果使用480px，只能铺满iPhone4这种2:3的手机，在9:16的屏幕底部，必定出现空白。）
笔者按照这个思路设计了一个简单的测试网页（），或者扫下面的二维码。
&&&&&&&&&&&&&&&&&&图1
两张图的尺寸分别为①414*736px，②640x1136px，③px，图④，测试字号和矩形，均等比例放大，上一行文字是代码控制的，下一行的文字是图片。在手机上浏览可以明显的看出，第一张图的文字和圆角矩形边缘有锯齿感；而图①中的上一行文字、图②、图③、图④中几乎看不到锯齿。
这里有三个问题需要解释，
A.图①为什么会模糊？
B.图②③④为什么不模糊？
C.图①上一行文字不模糊，而下一行文字模糊？
简单来说，图片是像素图（位图），小尺寸图片能够在高ppi上显示，是系统程序把图片进行了放大，例如，用iPhone6+看这些网页图时，程序把414px宽度的图片拉伸到了1080px。那么多出来的像素如何凭空生成？计算机只有猜测了，通过线性插值算法（不需要理解，意会即可）。所以图片便会出现模糊。&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图2
那么图片可能被拉伸的问题并非是绝对的，例如测试网页中，图④图片的大小明显要高于iPhone6+的分辨率，此时图片是被压缩的。
图③④的图片没有模糊，这个很好理解，图片分辨率比≥设备物理分辨率。图②的分辨率是低于屏幕物理分辨率，是否被拉伸了？答案是肯定的，但是为什么视觉上没有模糊的感觉？我们先回忆苹果的retina屏幕，手机ppi达到326时，正常视觉上已经无法分辨单个像素，而iPhone6+的ppi达到了401，不借助设备放大的情况下已经远超过视觉能够分辨的程度，640x1136的图②被拉伸时，系统会给图片进行像素补充，边缘出现了一些亚像素（像素点的颜色进行一定的偏移），此时在401的ppi下人的肉眼仍然无法分辨边缘模糊的图②（一般情况下，人眼极限临界值就是326ppi）。不信看下图3，我将图②和图③截图保存后放大，观察边缘，图②的边缘要模糊于图③的边缘。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图3
图①中下一行文字模糊是因为这些文字是像素图，被拉伸所以边缘模糊，很好理解，而上一行文字是通过代码样式来写的，在本系列文章的上部中，我们说到了css像素，当dpi（设备像素比）为N时，一个css像素就等于N个设备物理像素，这里可以简单的理解为，一个css像素被程序用N个物理像素代替了，这和上文说到的线性插值算法不同。
而设备独立像素又等同于css像素，所以在前端布局时，不用把css像素值乘以设备像素比。这也就是解释了为什么设计稿图片的尺寸是Y时，前端样式只要限制为Y/N的大小即可。也就是在320px屏宽的原型稿上标注的尺寸。
综上所述，设计稿一般设计为640x1136px即可。既满足了显示需求，又能降低用户加载图片需要的带宽。
其实写到这里，所有的问题基本算是解决了，但是我们在用各种分辨率的智能手机查看H5页面时，会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图4
图4是一个H5单屏翻页的页面在不同环境，不同APP下所显示的内容。我们知道，移动端网页一般都是在手机浏览器或者有内置浏览器功能的应用中打开：UC（百度、QQ）浏览器、安卓原生浏览器、Safari、QQ内置浏览器、微信内置浏览器、支付宝内置浏览器等等（可能还有人会令人发指的使用浏览器的全屏模式）。
所以我们在页面内容规划布局时，不能把重要内容放在太偏下的位置，否则前端布局时可能出现内容显示不全的情况。
通过对比可得：
除去将浏览器全屏显示的情况，几乎所有情况均会有顶部的状态栏和导航栏。iPhone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。由于Android系统可以更改状态栏和导航栏的高度，这里可以取默认值为48px和100px（这些尺寸网上均可查）。那么就会把网页内容往下挤，进入盲区（根据不同的布局方式可能挤出视口，即可视区域之下，）。取这两个系统者的最大值为148（48+100）,如下图5，设计稿要尽量保证单页下面没有重要内容。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图5
那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能手机分辨率都在640x960px（iPhone4分辨率）之上，所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812（960-148=812）。
在此总结，一般情况下，以现有市场上流行的移动智能手机，单页翻转（非延伸向下的长页面）设计稿尺寸为640x1136，在高度为812处设置一条安全线（参考线），将重要的内容布局在这条安全线之上。
1、像素是没有宽高的（不要被Photoshop中的像素格欺骗），它只代表一个采样的色值。
2、任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，此时的ppi对于图片来说时没有任何意义，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有ppi的意义，被打印出来才可以描述这张图片有多高多宽。
3、平时制作H5页面时设计原型时，产品经理出的原型稿建议屏宽为320px，用这个尺寸一是为了浏览方便（现在很多手机的屏宽达到1440px，用这个尺寸去模拟显然不现实），二是以iPhone5s为标准的手机屏宽较小，进行内容排版布局时屏宽应该向下兼容。
4、制作设计稿时，设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时，按照现在流行的做法，可以直接使用原型稿上的尺寸，也就是设计稿上的1/2。
5、一般情况下，H5页面设计稿做成640x1136px是最为稳妥的尺寸，在812px高度处增加一条安全线，重要内容在此线之上（网上有些文章说安全线是960px处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。推荐前端攻城狮使用腾讯智图（/），这里的图片压缩还是相当好用，可以节省用户不少带宽。
嗯，问题解决了真的很爽，这个问题和这篇文章断断续续用了我大约2个月时间。文章篇幅可能有点长，但是很多东西感觉有必要交代，希望对有同样困惑的产品经理，平面设计师，前端攻城狮有一点帮助。
评论 ( 2 )
热度 ( 57 )
很喜欢此文字
很喜欢此文字
很喜欢此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
转载了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
转载了此文字
很喜欢此文字
转载了此文字
很喜欢此文字
转载了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
推荐了此文字
转载了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
转载了此文字
很喜欢此文字
很喜欢此文字
转载了此文字
很喜欢此文字
很喜欢此文字
推荐了此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
很喜欢此文字
转载了此文字
推荐了此文字
转载了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字移动端设计尺寸基础知识
作者：佚名　来源：可乐橙　时间： 标签：
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。
首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720xx1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x34, 。
不要被这些尺寸吓倒。实际上大部分的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 []（早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上）
xxxhdpi []（极少数2K屏手机，比如Google Nexus 6）
自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。
不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和，它们分别属于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应用时，有的设计师喜欢把画布设为，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。
无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说&底部标签栏的高度是96像素，我是按照xhdpi做的&这样的话了。
移动端页面的绝对单位仍然是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，就要选择逻辑像素折中的机型。
从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。
按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。
不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。
都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。
对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。
当然，这些机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起。不作考虑也是OK的。
手机端网页就没有统一标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。
这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。
如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414x736。
移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。
【设计之家 原创文章 投稿邮箱：】在线时间1 小时
版本V8.2.3.0.KHDCNDL
积分 80, 距离下一级还需 120 积分
积分 80, 距离下一级还需 120 积分
机型红米Note WCDMA版
MIUI版本V8.2.3.0.KHDCNDL
问答:京东手机网页最大宽度是640px，我的手机横向屏宽度是1080px，为什么京东还是全屏显示呢？
分享到微信朋友圈
打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。
经验9278 米
在线时间249 小时
版本7.9.25
这是一个自定义头衔
机型小米手机6
签到次数40
MIUI版本7.9.25
本帖最后由 问答小助手 于
17:29 编辑
目前的绝大部分网站，是可以根据使用设备的分辨率来自动拉伸网页的，不需要太在意
经验7162 米
在线时间188 小时
版本7.9.21
机型红米手机1S WCDMA 3G版
签到次数28
MIUI版本7.9.21
本帖最后由 问答小助手 于
17:29 编辑
很多的网页的界面，都会通过所在设备的分辨率，宽度等等进行拉伸和缩放等等操作，避免界面显示没办法看，就算是电视那么大的尺寸，也是会进行一定程度的拉伸的
经验9718 米
在线时间664 小时
版本7.9.27
机型小米手机6
签到次数121
MIUI版本7.9.27
本帖最后由 问答小助手 于
17:29 编辑
因为现在大部分的网页都可以自适应分辨率，可以根据设备分辨率自动调整，提升观感，令用户使用更加方便
经验40234 米
在线时间1180 小时
版本7.9.14
MIUI9内测组
机型红米Note4X 高通版
签到次数167
MIUI版本7.9.14
本帖最后由 问答小助手 于
17:30 编辑
软件在编写的时候，会自动适应当前手机的分辨率的。比如安卓手机的分辨率有很多，不可能一个分辨率一个分辨率都适配一次。软件在运行的时候会自动等比例拉伸以适应手机当前屏幕的。
经验8519 米
在线时间110 小时
版本7.9.20
机型小米手机5
签到次数28
MIUI版本7.9.20
本帖最后由 问答小助手 于
17:30 编辑
网页是使用CSS样式设计中的像素，和显示屏的像素不是对等的，是需要通过设备像素比进行换算的。
设备像素 ( device pixel ) 是物理概念，一般指的是设备中使用的物理像素，比如 iPhone 5 的分辨率 640 x 1136px。
CSS 像素 ( css pixel ) 是Web 编程的概念，一般指的是 CSS 样式代码中使用的逻辑像素。在 CSS 规范中，长度单位可以分为两类，绝对( absolute )单位以及相对( relative )单位。px 是一个相对单位，相对的是设备像素( device pixel )。
（如侵删）
经验4663 米
在线时间273 小时
版本7.9.26
机型小米Max 高配版
签到次数43
MIUI版本7.9.26
本帖最后由 问答小助手 于
17:30 编辑
首先在手机浏览器设置里面都会有一个功能就是切换网页手机版还是电脑版（桌面版）。但是手机查看电脑版网页很不舒服，字体和图片太小，容易误触等。所有为了优化手机显示，部分网页也就做了适配，部分手机浏览器也支持自动修改分辨率方便用户查看等。
另外手机版的网页为了避免手机分辨率多样化，用户在横竖屏的时候造成区域空白，就会对网页进行百分比的优化拉伸，或者等比例缩扩放。明显看到在横屏显示图片等都会变大，而且显示的内容也并没有竖屏的时候多。所以横屏就相当于一个放大镜作用，在竖屏分辨率扩大到横屏显示，放大页面，避免误触。
经验94346 米
在线时间1060 小时
版本7.9.21
每天坚持到论坛看看
机型小米手机3/4 WCDMA版
签到次数37
MIUI版本7.9.21
本帖最后由 问答小助手 于
17:31 编辑
是页面根据手机屏幕宽度 ，后台用代码调节比例缩放，然后适合手机屏幕横屏打开，这也是增进用户体验的方式。（原创）
经验16001 米
在线时间370 小时
版本7.9.27
机型红米Note4X 高通版
签到次数50
MIUI版本7.9.27
本帖最后由 问答小助手 于
17:31 编辑
现在的手机太多了，分辨率不一样的也太多了，所以每个分辨率都给适配一边，所以所以网页在显示一个网页时，浏览器会自动根据一定的比例调节到适合到手机的分辨率。
经验14191 米
在线时间277 小时
版本7.8.24
MIUI解答组
机型小米手机4c
签到次数45
MIUI版本7.8.24
通过手机发布
本帖最后由 问答小助手 于
17:31 编辑
不同设备，不同网页，分辨率都是不同的。
另外在预览的时候，为了方便阅读以及看着舒服，大部分的网页都会自适应分辨率（就是自动进行拉伸网页）。
（原创）&&
人不可能无所不知，如果我的回答有什么不对的地方请指正我。
经验5974 米
在线时间111 小时
版本7.9.22
热心解答组
机型小米手机6
签到次数123
MIUI版本7.9.22
本帖最后由 问答小助手 于
06:48 编辑
各个应用在编写的时候都会设计自动拉伸网页的，这是一个非常人性化的设计。这是为了避免某些用户看起来不舒服，或显示不正常的问题。
我家里用的电视也是可以拉伸的，当你感觉长宽拉伸过大，扭曲图像的时候只需要调节一下就会变成录制大小。
不管怎么样，这种设计都是为了用户，一切开发者都是以用户体验为上的！
永远相信美好的事情即将发生！
经验3582 米
在线时间110 小时
版本7.9.26
机型小米手机4c
签到次数64
MIUI版本7.9.26
本帖最后由 问答小助手 于
06:49 编辑
因为网页可以自适应屏幕，进行拉伸或者压缩，这种感觉就类似于电影和投影，画面的大小可以随画布的距离而改变，而画面还是那个画面，变化的只是尺寸。
经验20865 米
在线时间610 小时
版本7.9.21
机型小米手机6
签到次数23
MIUI版本7.9.21
浏览器啊～浏览器的作用还是非常大的，会智能调节分辨率，方便用户查看，这方面浏览器还是非常出色的～
经验1279 米
在线时间9 小时
版本7.9.21
积分 1462, 距离下一级还需 538 积分
积分 1462, 距离下一级还需 538 积分
机型红米Note3 全网通
签到次数46
MIUI版本7.9.21
分辨率吧?& & 安卓好像自动匹配适应的& &
经验6321 米
在线时间328 小时
版本7.9.26
机型红米手机4X
签到次数19
MIUI版本7.9.26
目前许多的设备都是根据应用来自己适应屏幕分辨率大小的，楼主不必担心（原创）
经验428 米
在线时间13 小时
版本7.6.29
积分 474, 距离下一级还需 26 积分
积分 474, 距离下一级还需 26 积分
机型小米手机6
签到次数17
MIUI版本7.6.29
这个有必要纠结？
经验5233 米
在线时间186 小时
版本7.9.22
机型小米手机5
签到次数44
MIUI版本7.9.22
本帖最后由 问答小助手 于
17:30 编辑
手机屏幕和网站是自适应大小。可以拉伸达到全屏效果。全屏看起来会更舒适。（原创）
MIUI七夕鹊桥勋章
MIUI七周年
MIUI 9纪念勋章
小米众筹2周年
参加回帖活动
新版论坛APP
更新新版APP
参与红米Note 4X活动
2017年小金鸡勋章
回复2016年度评选活动贴
圣诞节勋章
参与圣诞活动
小火箭勋章
神舟11号 话题活动
解答组专属勋章
解答组专属勋章
已关注微信
已关注极客秀微信
关注新浪微博
已关注新浪微博
“澎湃S1 ”芯片纪念勋章
参与活动回帖可得
APP 1000万
MIUI论坛APP注册用户突破1000万纪念勋章
MIUI 300周
MIUI 300周更新纪念勋章
为奥运加油勋章
为奥运加油勋章
MIUI 8纪念勋章
MIUI 8纪念勋章
MIUI 7纪念勋章
MIUI五周年
MIUI五周年纪念勋章
关注腾讯微博
已关注腾讯微博
发烧友俱乐部
发烧友俱乐部
MIUI年度优秀勋章
小米7周年勋章
2017米粉节晒单赢专属勋章
小米六周年
小米六周年米粉节
MIUI6 荣誉勋章
MIUI6 荣誉勋章
MIUI六周年
MIUI六周年纪念勋章
用户反馈APP词条填充精英
参与用户反馈APP常见问题填充活动
Copyright (C) 2017 MIUI
京ICP备号 | 京公网安备34号 | 京ICP证110507号