视口，像素和屏幕宽度获取方法

最新推荐文章于 2024-08-27 10:49:57 发布
最新推荐文章于 2024-08-27 10:49:57 发布
阅读量1.6k 收藏 6
点赞数
分类专栏： # css3 HTML 文章标签： html5 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58139900/article/details/120733458
版权
本文介绍了移动设备的视口概念，包括布局视口和理想视口，并讲解了如何通过meta标签来控制视口。同时，文章讨论了逻辑像素和物理像素的区别，以及在不同设备上的表现。此外，还探讨了二倍图技术的应用，屏幕宽度的获取方法，如H5媒体查询和JavaScript获取视口宽度的技巧。
摘要由CSDN通过智能技术生成

目录

设备划分

视口

逻辑像素和物理像素

 二倍图技术

屏幕宽度获取

h5媒体查询

js获取视口的宽度

设备划分

pc端大屏 > 1200px

超小屏 :phone 320px-750px

小屏; pad 768px-1024px

中屏: 992px-1200px

视口

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，比如布局视口开始为了在手机上展示pc端页面就设置为980px的宽度.

2个视口总结如下：

  • layout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，宽度一般为980px。

  • ideal viewport(理想视口)：布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。

最低0.47元/天 解锁文章
玖商
关注
专栏目录
区分浏览器视口的尺寸 （字节2020校招）
qq_46179838的博客
09-30 1420
下面开始区分 一、clientWidth和clientHeigh 、 clientTop和clientLeft 1，clientWidth的实际宽度 clientWidth = width+左右padding 2，clientHeigh的实际高度 clientHeigh = height + 上下padding 3，clientTop的实际宽度 clientTop = boder.top(上边框的宽度) 4，clientLeft的
js调用屏幕宽度的简单方法
10-21
本文将详细介绍如何利用JavaScript获取屏幕宽度以及浏览器窗口的相关尺寸信息。 首先，JavaScript中的`screen`对象是一个内置对象，它提供了有关用户屏幕的信息。通过`screen.width`和`screen.height`属性，可以...
获取视口的大小
笙
03-22 3279
获取视口的三种方法：（1）window.innerHeight – 浏览器窗口的内部高度         window.innerWidth – 浏览器窗口的内部宽度         IE8及以下不支持（2）document.documentElement.clientWidth ——可见区域的宽        document.documentElement.clientHeight ——可见区...
不使用 JS 纯 CSS 获取屏幕宽高
最新发布
南城
08-27 1071
CSS 自定义属性（也称为 CSS 变量）允许开发者在 CSS 中定义可重用的值。通过使用 var() 函数，可以在样式表的任何地方引用这些变量。自定义属性的定义通常在:root选择器中进行，以便在整个文档中使用。通过使用 CSS 的@property规则和数学函数，我们可以在不使用 JavaScript 的情况下获取屏幕的宽度和高度。随着 CSS 规范的不断发展，未来可能会有更多类似的功能，使得前端开发更加灵活和高效。
获取视口宽度
weixin_36094484的博客
07-06 1416
function(){     var w=windows.innerWidth  //IE9以上现代浏览器 || document.documentElement.clientWidth  //兼容IE8 || document.body.clientWidth;    IE6严格模式 var h=windows.innerHeight || document.documentElement.
屏幕视口宽度及元素尺寸的获取
weixin_33698043的博客
11-06 337
原生 JavaScript 和 jQuery 获取屏幕视口宽度及元素尺寸的方法： 屏幕视口宽度 // 原生js方法: window.innerHeight // 标准浏览器及IE9+ document.documentElement.clientHeight // 标准浏览器及低版本IE标准模式 document.body.clientHeight // 低版本混杂模式 // jQuery...
获取视口
weixin_45970898的博客
09-14 165
.div1 { width: 200px; height: 200px; margin: 30px 30px; background-color: aqua; border: 1px solid red; padding: 2px; position: relative; } .div2 {
获取窗口宽度和浏览器窗口宽度的方法
Niucode的博客
03-25 1275
获取窗口宽度和浏览器窗口宽度的方法
移动开发之自适应手机屏幕宽度
09-01
本文将探讨几种实现自适应屏幕宽度的方法，并解析相关知识点。 首先，最常见的方式是通过`<meta>`标签，特别是`<meta name="viewport">`。这个标签告诉浏览器应该如何调整网页的大小以适应移动设备的屏幕。`width=...
JS获取元素的宽高及位置，视口的宽高的几种方法
qq_43123623的博客
10-10 5716
JS获取元素的宽高及位置，视口的宽高的几种方法 第一次使用CSDN，记录下遇到的几种JS获取DOM元素的宽高的方法。 1.不同视口的获取方法 1.1获取视口大小(包括垂直滚动条) var width = window.innerWidth var height = window.innerHeight 1.2获取视口大小(内容区域大小,包括侧边栏，窗口镶边，和调整窗口大小的边距) var ...
【移动端】PC视口、移动端视口的获取
马云
01-15 916
PC视口 1、获取可视区域的宽度(不包含滚动条) document.documentElement.clientWidth 2、获取浏览器窗口的宽度(包含滚动条) window.innerWidth 3、获取浏览器总宽(包含外侧阴影) window.outerWidth 4、获取屏幕的宽度(screen) screen.width 移动端视口 1、获取布局视口的宽度 document.documentElement.clientWidth 2、获取视觉视口的宽度 window.innerWidth ...
获取移动端屏幕的宽度的方法
weixin_30755709的博客
11-21 867
直接用 screen.width 就可以判断出来 转载于:https://www.cnblogs.com/agansj/p/7874848.html
屏幕宽高的一些获取方法汇总
weixin_30538029的博客
05-25 81
document.documentElement.clientWidth; document.documentElement.clientHeight;这个得到的是设备像素可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320*416(手机480 - 微信状态栏64) 比如上面说的screen.width screen.height这些数据在有的手机上并不准确，比如三星...
js获取浏览器可视区域的宽度
欢欢的博客
06-02 1038
在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取： document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： document.documentElement.clientWidth document.documentElement.clientHeight 网页可见区域宽： document.body.clientWidth;     网页可
js获取可视屏幕的宽高
weixin_45932157的博客
04-15 948
可视区域宽度=document.documentElement.clientWidth 可视区域高度=document.documentElement.clientHeight
javascript 获取视口的高度和宽度
weixin_30649641的博客
06-15 708
//获取视口的高度和宽度。function windowHeight() {var de = document.documentElement;return self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight;}function windowWidth() {var de = doc...
移动端的屏幕分辨率与浏览器的视口宽度(视口大小)是两回事儿,通常来说手机的视口宽度是多少？
昊虹AI笔记
09-05 645
移动端的屏幕分辨率与浏览器的视口宽度(视口大小)是两回事儿
获取页面高度和宽度等
卡卡的笔录
12-12 2515
获取页面相关的高度 获取网页可见区域的高（不包括菜单栏） var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; 获取页面body的高（不包括菜单栏，包括滚动条滚动的高度） var bodyHeight = document.documentElement.off.........
移动Web开发：像素与视口优化指南
- 可以使用JavaScript访问`document.body.clientWidth`等属性来获取当前设备的布局视口宽度，以便动态调整页面布局。 该文档详细介绍了移动web开发中的关键概念和技术细节，对于理解响应式布局和优化移动端用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值