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

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

在手机端取到的

网页可见区域宽 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

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

  • ios9下在浏览器中通过scheme打开app的问题
  • H5 audio 在iOS上无法播放网络资源
  • 在livestyle的官网下载livestyle的app下载不下来,翻墙也不行,有谁能帮我下载一下吗
  • CodeMirror如何关闭自动缩进
  • HTML5 中,<textarea> 的 placeholder 如何进行换行?
  • html5 video标签的后台
  • 在安卓4.4.2版本使用appium检测不出webview,只能检测出native,为什么呢?
  • chrome中pre里面的代码无法高亮显示是为什么
  • 关于 webpack sass-loader 的url问题
  • vue-router懒加载问题
  • 关于webstrom使用FTP和svn功能的求助!!!