1. 移动端适配的代码（设计稿iPhone6）如下：
(function (doc,win) {
var dpr = win.devicePixelRatio, scale = 1 / dpr; doc.write("
+scale
+
",minimum-scale="
+scale
+
",maximum-scale="
+scale
+
",user-scalable=no>"
)
;
var
fn
=
function
(
)
{
var deviceWidth
= doc
.documentElement
.clientWidth
;
// 获取的是css像素，也是逻辑像素
// 移动设备的横向逻辑像素超过640（这时候物理像素大于1280），可以去访问pc端了。
if
(deviceWidth
>
1280
)
{
// 保持font-size值不变。 deviceWidth
=
1280
;
} doc
.documentElement
.style
.fontSize
= deviceWidth
/
7.5
+
'px'
;
} window
.
addEventListener
(
'orientationchange'
in win
?
'orientationchange'
:
'resize'
, fn
,
false
)
; doc
.
addEventListener
(
'DOMContentLoaded'
,fn
,
false
)
;
}
)
(document
,window
)
2.window.devicePixelRatio
- 是什么
window.devicePixelRatio获取的是设备物理像素和独立像素的比。 - 应用
缩放比用1/dpr可以解决1px边框在移动端屏幕上显示“粗”的问题，以屏幕物理像素来显示这1px的边框。
3.屏幕分辨率
- 概念
像素每英寸（Pixel per inch, ppi）。指纵横向上的像素点数，单位是px。例如，1920 * 1080 ，表示屏幕横向像素为1920px，纵向为1080px - 注意
有一点要明确，谷歌浏览器模拟调试移动端看到的iPhone6的屏幕宽度为375，指的是css像素（设备独立像素或者逻辑像素），而750px指的是手机上的真实存在的物理像素，例如，iPhnoe6屏幕物理像素点750 * 1334。这里也就是手机系统设置中的屏幕分辨率。
4.document.documentElement.clientWidth
document.documentElement.clientWidth获取的是移动设备的layout viewport（布局视口宽度），也是网页的宽度。- 指的是css像素，并且不包括滚动条的宽度。而window.innerWidth是包括的。二者之差，可以得出滚动条的宽度。
5.理想视口
理想视口怎么得到？width=device-width，这是将layout viewport（布局视口）宽度设置为设备屏幕宽度，这句就得到了理想视口。
6.若屏幕分辨率过大，像平板这种，如何处理呢？
- 我的处理是设置一个屏幕阈值，当屏幕物理像素（
document.documentElement.clientWidth）超过某个值时，页面便不再等比变化进行适配。js如下：
- 这样处理，势必会导致视口区域留白。因此，我会将页面居中显示，然后，背景色为黑色。这样显示稍微好点。如图：
css样式为：
html{
width: 100%; background-color: #000; } body{
width: 7.5rem; margin: 0 auto; background: #fff; } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/210247.html原文链接：https://javaforall.net
