控制html页面在浏览器显示比例,判断浏览器缩放比例的方法_html/css

首先，需要知道一些基础知识：

1、css 像素和实际像素

实际像素：设备的固有像素值

css像素：当浏览器不进行缩放时，css像素等同于实际像素

2、四个屏幕宽度属性

screen.width：设备的屏幕宽度，不会改变，比如笔记本的实际像素为1280，得出的结果将一直是1280，单位为px

window.innerWidth：度量的是浏览器窗口的宽度。度量单位是css pixels。如下图：

document.documentElement.clientWidth:可以理解为视口宽度，和浏览器窗口的宽度(window.innerWidth)相差为垂直滚动条的宽度，此属性的单位为物理px

document.documentElement.offsetWidth：这个属性取得是html的宽度

简单来说，可以这样来看：当浏览器满屏幕时：screen.width = window.innerWidth

当缩放比例为100%时：window.innerWidth = document.documentElement.clientWidth

当屏幕html元素宽度为100%时：document.documentElement.offsetWidth = document.documentElement.clientWidth 简单来说，如下图：

所以，判断浏览器缩放比例的方法就很简单了,直接上代码。 var ratio = document.documentElement.clientWidth / window.innerWidth

参考文献，深度好文

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

控制html页面在浏览器显示比例,判断浏览器缩放比例的方法_html/css_WEB-ITnose相关推荐

html谷歌浏览器3D效果图片不出现,chrome浏览器图片无法显示怎么办 chrome浏览器显示不出图片的解决方法...
谷歌浏览器是现在非常多用户常用的浏览器之一,在很多使用的过程中,难免也会遇到一些问题,最近有很多用户在浏览器页面时发现图片无法正常显示,那么这种情况该怎么解决呢?下面教程之家网为大家带来chrome浏 ...
chorme浏览器显示“您的浏览器受管理”是被植入病毒或其它程序了吗？
chorme浏览器显示"您的浏览器受管理"是被植入病毒或其它程序了吗? 这个是隐藏的插件,用来重定向你的网址链接,从而实现广告收入按照官方说明去清理,网上好多人说的是无效的,官方 ...
javaScript解决浏览器兼容问题,判断浏览器是ie或者Chrome
最近在写一个项目中遇到了一个问题,从java后台输出一段字符串,需要用到这个字符串,返回到页面上面. 假定该字符串为"" 在Chrome上得到的结果是<pre style= ...
html js 浏览器语言,js 判断浏览器语言的方法
今天遇到一个要根据浏览器设置语言的类型,来展示网站的字体.比如,浏览器的语言是中文简体,那么网站也要显示中文简体字,如果是繁体或是英文都要根据浏览器当前设置的语言进行显示.那么,飞鸟慕鱼博客来和大家说 ...
一些js代码，自己备用的。高手不要笑话我。。（跨浏览器基础事件，浏览器检测，判断浏览器的名称、版本号、操作系统）...
跨浏览器基础事件 View Code 1 //跨浏览器添加事件 2 function addEvent(obj, type, fn) { 3 if (obj.addEventListener) { 4 ...
java判断浏览器类型_判断浏览器类型
一.判断是否为IE 以前判断是否IE浏览器用的是window.navigator.userAgent,跟踪这个信息,发现在开发环境,识别为IE10,但访问服务器则识别为IE11,但IE11的userA ...
浏览器显示html过程,浏览器显示页面的流程
简单说步骤如下: 1: 浏览器拿到html之后,开始解析html,生成dom tree 2: 在dom解析中,遇到js的外链或者script代码,浏览器会停止dom解析,在完成js代码下载执行之后,再 ...
jsp页面点击显示影藏div的一个方法
先影藏div #dis{display: none;} 给按键设置点击属性 <td><input type="button" class="btn&q ...
html css高度自适应浏览器高度,Div + CSS高度自适应解决方法_html/css_WEB-ITnose
转这几天用div+css写网站,样子上中下,中间是个左中右3列,可这3列不是等高偏巧有不同颜色的背景,结果就是ie.firefox...这些浏览器无一例外的现实的效果都是长短不齐,如何让这3列可以 ...

控制html页面在浏览器显示比例,判断浏览器缩放比例的方法_html/css_WEB-ITnose

控制html页面在浏览器显示比例,判断浏览器缩放比例的方法_html/css_WEB-ITnose相关推荐

最新文章

热门文章