控制html页面在浏览器显示比例,判断浏览器缩放比例的方法_html/css_WEB-ITnose
首先,需要知道一些基礎知識:
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,根据在下拉列
- 下一篇: 前端html5的框架有哪些,10大htm