为什么在手机上通过window.screen.width和window.screen.height取到的值是手机分辨率的一半？

Question

我用iphone6，在微信浏览器里面做单页应用，取网页上的基本数据，如window.screen.height取到568，为分辨率高的一半（1136/2)。同理宽度也是，要怎样做才能显示到640x1136的高清分辨率呢？

在手机端取到的

网页可见区域宽 document.body.clientWidth：320
网页可见区域高 document.body.clientHeight：1210
网页可见区域宽 document.body.offsetWidth：320 (包括边线的宽)
网页可见区域高 document.body.offsetHeight：1210 (包括边线的宽)
网页正文全文宽 document.body.scrollWidth：320
网页正文全文高 document.body.scrollHeight：1210
网页被卷去的高 document.body.scrollTop：133
网页被卷去的左 document.body.scrollLeft：0
网页正文部分上 window.screenTop：0
网页正文部分左 window.screenLeft：0
屏幕分辨率的高 window.screen.height：568
屏幕分辨率的宽 window.screen.width：320
屏幕可用工作区高度 window.screen.availHeight：548
屏幕可用工作区宽度 window.screen.availWidth：320

在pc端取这些数据都是正常的，

网页可见区域宽 document.body.clientWidth：568
网页可见区域高 document.body.clientHeight：1210
网页可见区域宽 document.body.offsetWidth：568 (包括边线的宽)
网页可见区域高 document.body.offsetHeight：1210 (包括边线的宽)
网页正文全文宽 document.body.scrollWidth：568
网页正文全文高 document.body.scrollHeight：1210
网页被卷去的高 document.body.scrollTop：0
网页被卷去的左 document.body.scrollLeft：0
网页正文部分上 window.screenTop：157
网页正文部分左 window.screenLeft：60
屏幕分辨率的高 window.screen.height：900
屏幕分辨率的宽 window.screen.width：1440
屏幕可用工作区高度 window.screen.availHeight：877
屏幕可用工作区宽度 window.screen.availWidth：1401

Answer 1

看看这篇文章，会知道答案https://www.zhangxinxu.com/wo...

Answer 2

因为你的手机的独立像素比window.devicePixelRatio是2

Answer 3

首先这不科学啊，640*1136不应该是iPhone5/5s的屏幕像素么？
这个问题首先建议题主先了解一下“屏幕像素”、“屏幕分辨率”、“屏幕像素比devicePixelRatio”、“viewport”等这些概念。
首先在浏览器中能取到的宽高都是以px为单位，由于iPhone是视网膜屏幕，因此一个px中包含2个像素点，所以iPhone在浏览器中取到的px宽高都是手机标示的值的1/2或1/3(6 plus)