手机分辨率怎么调

JavaScript实现移动端页⾯按⼿机屏幕分辨率⾃动缩放的最强代码

⼿机的屏幕有⼤有⼩，移动web最好做成响应式布局，也就是⾃适应屏幕，没有固定宽⾼，这样的话，在所有⼿机上都可以正常显⽰。关于移动端页⾯按

⼿机屏幕分辨率⾃动缩放的js，先附上代码

做⼿机端页⾯最头疼的就是物理分辨率和逻辑分辨率的转换了，当拿到设计图的时候，图基本都是按物理分辨率来设计的，⼀般常⽤的为

640（iphone5/5s）、750（iphone6/6s），⽽⾕歌等浏览器采⽤⼩⼿机模式浏览页⾯的时候，上⾯的值为逻辑分辨率，调试的时候很难把控页⾯样式，在

⼿机端的样式也会因此⼤乱，在页⾯头部加⼊以上⼀段js之后，在⼿机端就可以正常显⽰了，

varphoneScale=phoneWidth/750;

除以的为设计图设计的页⾯宽度，750是按iphone6来设计（根据⾃⼰使⽤需求来修改），即让页⾯的放⼤⽐率=屏幕的逻辑分辨率/物理分辨率，从⽽达到

适应⼿机的效果。

（注意，有时候页⾯加了这段代码在调试的时候，切记刷新，刷新过后就会按⼿机缩放⽐例显⽰）

概念解析：

:⼀般我们所指的宽度width即为，物理宽度（物理分辨率）

device-width:⼜称为css-width，设备宽度（逻辑分辨率）

其中我们可以获取通过Width;

⽽获取css-width通过获取。

所以这⾥phoneWidth（逻辑分辨率）=parInt();

如iphone6的为750px，⽽css-width为375px。

明⽩⼀个浏览器默认⾏为。

试想，浏览器如果把电脑端的980px的⽹页展现在宽度为750px的iphone6⼿机屏上，势必会放不下，⼿机端横向会出现滚动条，怎么阻⽌这种情况呢，很

简单，浏览器默认⼀个虚拟窗⼝，不同浏览器有不同的虚拟窗⼝宽度的默认值如：safariiphone：980px;

opera:850px;

Andriodwebkit:800px;

IE:974px;

然后会把这个980px虚拟窗⼝装进宽度为750px的iphone6中，当然这样的话必须缩放，这就是为什么在⼿机中展现电脑端页⾯没有出现横向滚动条，⽽且

字迹明显变⼩的原因。

initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+'

这段代码切记要指定initial-scale=***，在安卓系统中，不指定默认的nitial-scale=***，只指定最⼩和最⼤缩放值，也可以正常显⽰，但是safari浏览器则会

失效，对于宽度是100%的页⾯，则显⽰为页⾯的30%左右的宽。

target-densitydpi=device-dpi

WebKit内核默认按照160的DPI来排版。假如设备真实DPI是480，宽度是1080，在WebKit会按160DPI，360宽度来排版。排版结束后在放⼤到1080宽。

所以当取idth之类的值的时候，取的是WebKit实际排版宽度360，⽽不是1080.

target-densitydpi=device-dpi可以强制内核以480DPI排版，使画⾯更精细，idth也将为屏幕宽度1080.

但WebKit从去年开始取消了对target-densitydpi的⽀持。（所以现在不建议写该属性了）

想实现target-densitydpi=device-dpi的效果有什么⽅法？提交此次补丁的WebKit开发者说可以⽤responsiveimages和CSSdeviceunits来替代。

参考链接：

以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助~如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持!