本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. 本文内容大部分属于翻译性质内容,因此,会不那么通俗易懂.不过,你是做手机开发的,或是有意向的,本文的内容如果细细读来,还是有些收获的. 一.定义 window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例.

Lumia 1520 IE11 mobile -> window.devicePixelRatio = 2.217964285714286 Lumia 1520 UAP 环境 -> window.devicePixelRatio = 2.200000047683716

window属性:devicePixelRatio 设备像素比 https://www.w3cschool.cn/fetch_api/fetch_api-atvq2nma.html devicePixelRatio属性示例 一个 canvas 在视网膜屏幕上可能显得太模糊.使用  window.devicePixelRatio 以确定应该添加多少额外的像素密度以允许更清晰的图像. px:pixel 像素

window.onresize = function(){ $(); }

获取宽高参考: 方法: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollHeight网页被卷去的高: docu

首先呢,我们将iPhone手机的相关数据表示如下 我们要理解很多东西,比如逻辑分辨率.物理分辨率.缩放因子.ppi等,这里先不讨论. 首先呢,我们先介绍下各个屏幕宽度: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽:

如果你是一个开始接触移动Web开发的前端工程师,那么你或许也遇到了和我曾经遇到的过问题:有太多新的概念需要掌握,太多相似的概念需要区分.没关系,我将用两篇文章的篇幅来解决这些问题.上篇文章关于解释和区分一些入门级别概念. 这些概念你或许一直在各种场合看到或者听说,好像熟的很,但你真的了解它们背后的含义吗?下篇文章我们就需要用到这些概念,聊一聊移动设备上的图片加载方案.至于响应式设计,已经有太多写的非常好的文章来叙述它们,这次在这里我就不赘述了. 我们先从听说最多一个概念——PPI开始. PPI

问题的产生 因为各方面原因,要用网页做界面,开发一个APP.内核使用的是腾讯的x5内核. 把外壳交给前端和设计测试的时候,都汇报:状态栏的颜色太不搭配了,要求可修改 遂启用了安卓4.4版本开始支持的沉浸式状态栏,打算把状态栏交给前端去自己绘制. 并提供了API,可以获取状态栏的高度. 没多久,前端报告,返回的高度有问题,比状态栏高很多. 于是我测了下,api返回的状态栏高度:55像素. 使用 安卓开发者工具 里的坐标测量工具测了下,状态栏高度的确是55像素左右 让前端好好检查他的代码. 然而前端

1. 常用属性 window.devicePixelRatio        像素比 = css / 物理像素 window.scrollX,window.scrollY    滚动条 卷曲距离 if (window.scrollY < 75) { window.scroll(0, 75); } 获取浏览器组件对象 window.locationbar        地址栏对象 window.menubar        菜单栏对象 window.scrollbars        窗口的滚动条

document.documentElement.clientWidth       不包含滚动条 window.innerWidth                                            +滚动条 window.outerWidth                                            +浏览器边框 window.width                                                     屏

1.window.name属性是一个字符串,表示当前窗口的名字,只有当浏览器窗口关闭的时候,此属性才会消失. 2.window.closed属性返回一个布尔值,表示窗口是否关闭.此属性一般用来检查使用脚本打开的窗口是否关闭,如:var popup = window.open();if ((popup !== null) && !popup.closed) { // 窗口仍然打开着} 3.window.self和window.window属性都指向窗口本身,这两个属性只读. 4.window

众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮 浏览器菜单栏 mac: cammond + +/- 浏览器菜单栏 由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或 Windows下ctrl +

这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放).检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放.这里提供javascript的方法来检测浏览器的缩放.对于 IE6,就直接无视了,因为 IE6 只能对文本进行缩放.先来说说浏览器提供的标准检测接口,window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,该属性就可以用于检测网页是否被缩放了.在普通的 PC 浏览器上,在默认无缩放的情

data() { return { instance: null, isZoomOpen: false }; }, mounted() { const that = this; this.isZoom(); window.addEventListener("resize", function() { that.isZoom(); }); }, methods: { // 浏览器缩放提示 (打开控制台会影响准确度) detectZoom: function() { let ratio =

由于用户的个人习惯或其他原因,可能会调整到电脑上的缩放比例或者浏览器的缩放比例,如果访问页面会看起来比较不好看, 电脑上的缩放: 浏览器上的缩放: 解决方法: function detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.deviceP

首先说明,这里所说的浏览器状态是指用户点击浏览器左上角的放大加号/减号所产生的页面整体变大变小的情况(快捷键:Ctrl+加号或 Ctrl+减号 或 Ctrl+滚轮上下) 实现代码如下: detectZoom 函数的返回值如果是 100 就是默认缩放级别,大于 100 则是放大了,小于 100 则是缩小了. function detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerC

本文主要针对移动端1物理像素问题展开 解决这个问题先要了解一下概念: CSS像素(CSS Pixel):(通俗说:样式中写的值)就是我们在样式代码中常写的逻辑像素,是一个抽象概念,实际并不存在 设备独立像素(Device Independent Pixel):与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素 设备像素(Device Pixel):物理像素,设备能控制显示的最小单位,我们眼睛看到的屏幕上所呈现的像素大小就是这个,我们常说的1920×1080

本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅. 移动端H5页面rem缩放方案flexible.js兼容375px方案的思路 参考: 移动端高清.多屏适配方案 viewport-and-flexible.js flexible.js github 一个新的项目复用了一些老页面,老页面是使用375px方案进行移动端适配的,meta[viewport]使用的是<meta name="viewport" content="width=375, user-sca

devicePixelRatio 那些事儿 设备像素比 window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,即公式表示为:window.devicePixelRatio = 物理像素 / dips. 物理像素(physical pixel):设备能控制显示的最小单位设备独立像素(device-independent pixel):独立于设备的用于逻辑上衡量像素的单位每英寸像素量(pixels per inch):一英寸长度上可以并排的像素数量 正常人眼可以识别的

var version = '007'; var host = window.location.host; function $$(id){return document.getElementById(id);} function l(s){console.log(s);}; function setCookie(name, value, isForever) { document.cookie = name + "=" + escape(value) + ";domain=