检测浏览器各类尺寸的页面

最新推荐文章于 2023-06-29 18:07:44 发布
最新推荐文章于 2023-06-29 18:07:44 发布
阅读量193 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 页面技术 文章标签： 浏览器 JavaScript CSS 工作 HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xieronghua246/article/details/83404679

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
    <title>Screen Size Test</title>
    <script language="JavaScript" type="text/JavaScript">
<!--
        function displayScreenSize()
        {
            var bodyWidth           =document.body.clientWidth;      //网页可见区域宽
            var bodyHeight          =document.body.clientHeight;     //网页可见区域高
            var bodyWidthWithBorder =document.body.offsetWidth;      //网页可见区域宽(包括边线的宽)
            var bodyHeightWithBorder=document.body.offsetHeight;     //网页可见区域高(包括边线的宽)
            var bodyWidthWithScroll =document.body.scrollWidth;      //网页正文全文宽
            var bodyHeightWithScroll=document.body.scrollHeight;     //网页正文全文高    
            var bodyTopHeight       =document.body.scrollTop;        //网页被卷去的上边距
            var bodyLeftWidth       =document.body.scrollLeft;       //网页被卷去的左边距
            var windowTopHeight     =window.screenTop;               //网页正文部分上边距
            var windowLeftWidth     =window.screenLeft;              //网页正文部分左边距
            var screenHeight        =window.screen.height;           //屏幕分辨率的高
            var screenWidth         =window.screen.width;            //屏幕分辨率的宽
            var screenAvailHeight   =window.screen.availHeight;      //屏幕可用工作区高度
            var screenAvailWidth    =window.screen.availWidth;       //屏幕可用工作区宽度
           
            var Str="<p>";
            Str+="网页可见区域宽:<span class='data'>"+bodyWidth+"px</span><br>";
            Str+="网页可见区域高:<span class='data'>"+bodyHeight+"px</span><br>";
            Str+="网页可见区域宽(包括边线的宽):<span class='data'>"+bodyWidthWithBorder+"px</span><br>";
            Str+="网页可见区域高(包括边线的宽):<span class='data'>"+bodyHeightWithBorder+"px</span><br>";
            Str+="网页正文全文宽:<span class='data'>"+bodyWidthWithScroll+"px</span><br>";
            Str+="网页正文全文高:<span class='data'>"+bodyHeightWithScroll+"px</span><br>";
            Str+="网页被卷去的上边距:<span class='data'>"+bodyTopHeight+"px</span><br>";
            Str+="网页被卷去的左边距:<span class='data'>"+bodyLeftWidth+"px</span><br>";
            Str+="网页正文部分上边距:<span class='data'>"+windowTopHeight+"px</span><br>";
            Str+="网页正文部分左边距:<span class='data'>"+windowLeftWidth+"px</span><br>";
            Str+="屏幕分辨率的高:<span class='data'>"+screenHeight+"px</span><br>";
            Str+="屏幕分辨率的宽:<span class='data'>"+screenWidth+"px</span><br>";
            Str+="屏幕可用工作区高度:<span class='data'>"+screenAvailHeight+"px</span><br>";
            Str+="屏幕可用工作区宽度:<span class='data'>"+screenAvailWidth+"px</span><br>";
            Str+="</p>"
            document.getElementById('dispaly').innerHTML=Str;
         }
// -->
</script>
    <style type="text/css">

<!--
A:link {}{
    text-decoration: none;
    color: #ff0000;
    font-weight: normal;
}
A:visited {}{
    text-decoration: none;
    color: #ff6666;
    font-weight: normal;
}
A:active {}{
    text-decoration: none;
    color: #ff0000;
    font-weight: normal;
}
A:hover {}{
    text-decoration: underline;
    color: #ff0000;
    font-weight: normal;
}
.title {}{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #990000;
}
.display {}{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.data {}{
    color: #FF0000;
    font-weight: bold;
}
.foot {}{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #5e5e5e;
    }
-->
   
</style>
</head><body onresize="javascript:displayScreenSize();" onload="javascript:displayScreenSize();">
<span class="title">Screen Size Test</span>
<hr align="left" size="1" noshade>
<span class="display">Now we get the screen size about this browser </span><br>
<span class="display" id="dispaly"></span>
<hr align="left" size="1" noshade>
<p align="right"><span class="foot">Screen Size Test by <a href="http://apolloge.cnblogs.com/">
apolloge</a> </span></p>
</body></html>

Python爬虫进阶：基于最新技术的浏览器环境检测绕过实战指南
2201_76125261的博客
07-25 28
本文深入探讨了现代反爬虫机制中的浏览器环境检测技术，并提供了多种基于最新Python技术的绕过方案。文章详细分析了浏览器指纹、WebGL渲染、Canvas检测、Web Audio API、WebRTC等常见检测点，并给出了完整的代码实现和实战案例。通过本文，读者将掌握如何构建高度仿真的浏览器环境，有效绕过各类反爬虫检测。关键词：Python爬虫、反反爬虫、浏览器指纹、环境检测、Playwright、Pyppeteer、Selenium。
绕过反爬虫识别：基于浏览器指纹模拟的Python爬虫实战
2201_76125261的博客
05-28 1024
模块内容User-Agent浏览器、操作系统等屏幕分辨率屏幕大小与颜色深度语言字体可用字体库Canvas 指纹2D图像渲染差异WebGL 指纹GPU 渲染特征Audio 指纹音频信号处理特征插件timezoneTouch事件是否支持移动端特性电池状态信息javascript复制编辑return {这意味着只要你打开页面，即使不输入任何账号密码，网站也可能知道你是谁。浏览器指纹是当前最为隐蔽也最有效的反爬虫手段之一。浏览器指纹的构成与识别机制利用绕过自动化检测。
JavaScript获取浏览器的显示区域大小信息
奔跑的五花肉灬
11-04 193
区域说明 JavaScript Code 网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区域宽(包括边线的宽) document.body.offsetWidth 网页可见区域高(包括边线的宽) document.body.offsetHeight 网页正文全文宽 document.bo...
JavaScript 获取浏览器的显示区域大小信息
Keep Fighting
09-10 920
网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区
js获取网页可见区域的高度和宽度
snowstorm的博客
04-22 2693
转自：http://qiaolevip.iteye.com/blog/2076034 document.body.clientWidth ==> BODY对象宽度   document.body.clientHeight ==> BODY对象高度   document.documentElement.clientWidth ==> 可见区域宽度   document.docum
网页浏览器跳转微信内置浏览器打开指定链接全攻略
最新发布
07-26
还涉及微信域名检测接口、WAP跳转微信接口、百度短链接生成接口、微博短链接生成接口、微信APP自动下载接口等各类接口，包括手机网页浏览器跳转到微信内置浏览器打开指定网页，网页跳转到微信、浏览器跳转微信链接，...
selenium webdriver执行浏览器自动化操作，模拟鼠标/键盘执行操作
weixin_49253310的博客
12-20 1343
python自动化测试–selenium webdriver的方法与应用 可执行的场景：通过获得浏览器的句柄，执行对浏览器的操作（窗口调整/新建标签页/输入，模拟键盘/戍边执行操作）。 一：环境 使用之前需要先搭配selenium的环境 //可直接在终端输入pip install selenium命令下载selenium的工具包 //因python操作浏览器是通过获取浏览器句柄实现执行操作的，所以需提前下载好与浏览器版本相匹配的驱动 二：使用方法 #导入包 from selenium import webd
获取浏览器可视区域高度，clientHeight等高度问题
qq_40147756的博客
06-29 2528
主要区分下面几个属性 - clientHeight - offsetHeight - window.innerHeight
viewPort(浏览器窗口的整个显示区域)
weixin_33858485的博客
02-19 270
2019独角兽企业重金招聘Python工程师标准>>> ...
js获取浏览器显示区域高度
name327的专栏
07-03 529
document.documentElement.clientHeight //获取显示区域高度 document.body.scrollTop//获取滚动条高度 document.getElementById("footid").offsetTop//获取元素到浏览器顶端的高度
浏览器的一些区域和位置信息记录
stalwartwill的专栏
05-22 1531
区域1：整个浏览器区域（包括菜单栏、状态栏） 区域2：窗口视区（可以看到HTML内容的区域） 区域3：内容区域（包括由于滚动偏移看不到的区域） window.innerHeight, window.innerWidth    区域2 window.outerHeight, window.outerWidth    区域1。IE和火狐的值有点偏大。Chrome刚好 document
智能手机操作系统、浏览器、屏幕尺寸
weixin_30800807的博客
04-06 301
一、智能手机操作系统、浏览器、屏幕尺寸 NetMarketShare数据网站2015年9月份智能手机操作系统的市场份额排名。 Android平台手机、IOS平台的iphone、黑莓（BlackBerry）各自内置的Web浏览器，如下： Android中的 Android Browser IOS中的 Mobile Safari BlackBerr...
JS获取各种屏幕的宽度和高度
m0_48524046的博客
12-09 7781
JS获取各种屏幕的宽度和高度
Js 获取客户区大小
sinat_39743159的博客
08-05 673
本文内容来自《JavaScript高级程序设计(第二版)》 内容, 只是方便大家以后可能会用到： function getViewport() { if(document.compatMode == "BackCompat"){ return { width:document.body.clientWidth,
js获取屏幕大小
纳川的博客
11-17 2146
$(document).ready(function() { alert('屏幕分辨率为：' + screen.width + '*' + screen.height); alert('屏幕分辨率为：' + window.screen.width + '*' + window.screen.height); alert('屏幕可用大小：' + screen.availWidth + '*' + screen.availHeight); ..
WebBrowser控件总是最大化显示页面
hellostory的专栏
12-14 525
编程时遇到一个问题：WebBrowser控件加载添加收件人页面时（弹出页面），WebBrowser控件显示区域很小，导致无法看到全部页面，并且和最大化后的窗体之间留有很大的空白区域。 解决： Private Sub Form_Resize() WebBrowser1.Left = Me.Left WebBrowser1.Top = Me.Top + 270 WebBrowser1.Wid...
C#实现简易浏览器：AxSHDocVw控件使用教程
开发人员可以利用这个控件创建自己的浏览器界面，并且可以控制浏览行为，如后退、前进、停止加载以及刷新页面等。 在这个自制浏览器项目中，通过运用AxSHDocVw.AxWebBrowser控件来实现一个简单的浏览器界面，该项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值