document.documentElement.clientWidth在PC端和移动端值得含义一样吗?

发布于 2022-09-02 10:46:09 字数 488 浏览 10 评论 0

在ppk关于viewport的三个言论中,分别阐述了document.documentElement.clientWidth在PC端和移动端的含义,引用他文章中的示例图如下:
在PC端中,该值代表的是浏览器视口的宽度:
PC端

而移动端中,该值代表的是整个文档的宽度,也就是ppk所定义的layout viewport。(而该值在PC端中应该是用document.documentElement.offsetWidth来表示):
移动端

为什么同一个属性在不同设备上代表的含义不同呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

傻比既视感 2022-09-09 10:46:09
  • viewport标签最初为apple所推行,适用于IOS中的Safari,后各大浏览器厂商陆续采用,现在仍非标准。所以我觉得pc端应该没有viewport的概念吧(这个有待考证)
    图片描述

  • 借用上面的图片,offsetWidth是指包括滚动条的部分,而document.documentElement.clientWidth是去除滚动条的部分,所以这两个值是不一样的。既然ppk指出viewport和clientWidth相关,那么计算标准也应该以clientWidth为主

  • clientWidth的定义是指网页可见区域宽,这个宽度在移动端可以通过js去修改,也就是在viewport中设置。但是在pc浏览器中这个设置并不会生效,还是按照实际的窗口大小去计算。

  • 关于clientWidth大小的修改可以参考这篇文章
    移动前端开发之viewport的深入理解。简单来说在移动端可以通过viewport的with属性设置clientWidth宽度,设置了多少clientWidth的值就是多少,而PC端并不会因此而改变

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文