浏览器chrome如何查看页面的尺寸？调整控制台的位置？手机端的页面浏览？

最新推荐文章于 2025-03-28 16:03:59 发布
最新推荐文章于 2025-03-28 16:03:59 发布
阅读量1.3w 收藏 1
点赞数 1
分类专栏： 浏览器 文章标签： chrome css html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Acarryon/article/details/105570133
版权

直接正题了

1. 页面尺寸的查看：

直接打开控制台（f12或者右键然后检查）；调整页面尺寸时右上角会有提示页面的尺寸
（好像最近chrome没有这个特性了，不过可以直接点击select elements就是左上角那个箭头，来显示网页各个部分的像素值来调整大小了）

2. 控制台的位置调整：

打开控制台点击右上角的三个点，后有dockside（chrome浏览器）然后点击后就可以调整了就是下图这个样子有四种位置可以选择

在这里插入图片描述

3. 手机端页面浏览

其实就是两个按钮的位置（控制台的左上角）

如下图（一个是页面选取后可以找到指定元素，一个就是手机端尺寸的网页浏览）
在这里插入图片描述

JS：如何获取浏览器窗口尺寸？
TianXuab的博客
10-09 1291
JavaScript是一种广泛使用的脚本语言，用于开发网页和应用程序。在Web开发中，经常需要获取浏览器窗口的尺寸，以便根据窗口大小进行布局或执行其他操作。本文将介绍如何使用JavaScript来获取浏览器窗口尺寸。
Chrome浏览器F12开发者工具的几个小技巧总结
gdjlc的专栏
06-09 3万+
1、直接修改页面元素 2、颜色取色器 3、快速查找并定位文件 4、编辑源代码 5、只分析异步请求资源
前端-chromeF12 谷歌开发者工具详解 Network篇
热门推荐
喵酱
02-10 6万+
原文链接：https://segmentfault.com/a/1190000010302235开发者工具初步介绍chrome开发者工具最常用的四个功能模块：Elements：主要用来查看前面界面的html的Dom结构，和修改css的样式。css可以即时修改，即使显示。大大方便了开发者调试页面，这真是十分友好的~console：这个除了查看错误信息、打印调试信息(console.log())、写一...
手机上（ios&安卓）如何打开网页控制台
最新发布
a2274001782的博客
03-28 2587
手机上（ios&安卓）如何打开网页控制台
获取浏览器的各项尺寸
weixin_45029438的博客
10-12 417
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
前端开发快速调整/保留常用浏览器尺寸（手机/pc端通用）
qianduanajl的博客
06-30 6089
1. 本文适用问题与痛点： 1.1 在浏览器快速切换各种非默认尺寸 1.2 所需测试的浏览器尺寸大于你的屏幕分辨率 2. 通过控制台调整自定义尺寸（本文都以chrome浏览器为例） 按【F12】调出控制台，点击下图1处调整控制台显示的方位，在手机端页面开发的时候，本人习惯选择最右的，在屏幕右侧显示控制台。 点击下图3处图标或Ctrl + Shift + M调出自定义模式 设计人员常用的尺寸是iPhone 6/7/8(375 * 667) 和 iPhone X(375 * 812) 自定
获取屏幕、当前网页和浏览器窗口的大小
HuntsBot的博客
01-07 2102
我怎样才能获得 windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY，它们适用于所有主流浏览器?https://i.stack.imgur.com/6xPdH.png
获取浏览器的窗口大小的全部方法
unstoppable007的博客
08-06 2600
window.innerWidth 浏览器当前总宽(不是物理屏幕,随浏览器窗口缩小而缩小) window.innerHeight 浏览器中body可视高(不包括地址栏和F12工具栏) document.body.(width或height) 自己代码中设置body的width,height document.body.(clientWidth或clientHeight) document.body.(width或height)+padding;(不包括和margin) document.body.(off.
js获取浏览器 尺寸信息
weixin_30565199的博客
08-23 98
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 这段文档标记很重要 网页可见区域宽：document.body.clientWidth （不加文档标记的情况下） 网页可见区域宽：d...
得到浏览器尺寸，判断浏览器内核
08-08
NULL 博文链接：https://gaojunwei.iteye.com/blog/2126610
IOS/ANDROID/浏览器判断/屏幕尺寸
love_w_b的专栏
12-24 666
var browser={         versions:function(){             var u = navigator.userAgent, app = navigator.appVersion;             return {                 trident: u.indexOf('Trident') > -1, //IE内核    
谷歌浏览器窗口大小调节
12-17
谷歌浏览器窗口大小调节，便于在pc端浏览Android
Android 手机浏览器调试使用Chrome进行调试实例详解
08-31
1. **手机端**：你需要在Android手机上安装Chrome浏览器，最好是最新版本，因为新版本通常包含更多的调试功能和修复的错误。 2. **PC端**：在个人计算机上，你也需要安装Chrome浏览器，最好是开发者版本，因为它...
手机端web调试打印控制台
04-27
标题"手机端web调试打印控制台"指的就是使用Chrome浏览器的开发者工具来对手机端的Web应用进行调试，包括查看和控制JavaScript的控制台输出，检查DOM结构，跟踪网络请求，以及性能分析等。这一功能极大地提高了...
chrome浏览器调试手机端h5页面
05-08
首先，我们需要在chrome浏览器上安装“谷歌chrome浏览器开发者工具”，然后在手机端打开该页面，并且把手机的USB数据线连接在电脑上，然后在chrome浏览器上打开手机页面的调试界面，进行页面调试工作。 在调试界面...
给Chrome浏览器添加 IPhone 13、12等手机型号做兼容适配
蓝即正义
12-08 1万+
1、圣诞将至，近期在为圣诞项目上活动，发生了下图的小问题，就写个blog。在做移动端适配时离不开的手机型号调试。 测试说有1PX的误差，但是在我的浏览器就没问题。 2、以下是Chrome自带的一些手机型号。可以看出在2021年底的今天，可以说是非常陈旧了。 3、接下来我们就添加新的手机型号。 先拿目前苹果系的最新机型iPhone 13为例，（我不喜欢IPhone）。 我们要填一些想要加入的设备的信息： 1）、首先是名称可以自行命名 2）、宽、高、像素比，这三项是重要的，要模...
uc手机浏览器 手机模拟_UC浏览器开发者版调试手机页面
weixin_30373263的博客
01-30 3365
1 关于RI目前，在手机上使用浏览器访问网页，无法便捷地进行网页语言调试。手机屏幕相对较小且操作不便，直接在手机上进行网页数据调试不太现实。因此，我们使用技术将手机网页调试信息分离，实现一种能在大屏幕、高配置PC上来调试小屏幕、低配置的手机浏览器访问的网页的开发工具——RemoteInspector(简称RI)。1.1主要功能Android平台UC浏览器开发者版，主要支持以下功能：DOM查看和修改...
如何获取浏览器窗口的大小
become a programmer
05-12 2818
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： docume
移动端如何准确获取页面的宽度
clarkt的专栏
06-04 3186
移动端的网页是需要实现自适应布局的，那么获取准确的页面宽度至关重要。 移动端的网页宽度并不等于手机的像素宽度，一般是320px、360px等值。 常规一般通过document.documentElement.clientWidth获取，但在最近的一个项目里面，发现在NEXUS 5机型下会偶发性地获取0值...所以需要寻找别的方法进行补充 目前找到的一种方法是： var dpr = wind
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值