mobile_缩放
document.documentElement.clientWidth 不包含滚动条
window.innerWidth +滚动条
window.outerWidth +浏览器边框
window.width 屏幕区域
IPhone 6 的 屏幕分辨率 为 750*1334
IPhone 6 的尺寸 为 4.7 英寸
IPhone 6 的 像素比 DPR 为 2 window.devicePixelRatio;
IPhone 6 的 独立像素 为 375*667 window.innerWidth;
IPhone 6 的布局(视口)像素为 980*1743 document.documentElement.clientWidth
从技术层面上开讲,缩放就是放大或者缩小 css 像素面积的过程
改变的是视觉视口的尺寸(放大操作,视觉视口变小,看到的东西变少)
移动端的缩放,没有改变布局视口的任何东西,改变的是视觉视口
布局视口,视觉视口,理想视口 最终代表的都是屏幕的尺寸
在屏幕这一块区域中,不同的视口 包含了不同个数的 css 像素 个数
IPhone 6 , 理想视口 = 布局视口 = 视觉视口 = 设备独立像素 = 375
- 用户缩放
- 布局视口不变,视觉视口改变
- 系统缩放
- 布局视口改变,视觉视口也改变
PC 端缩放
元素效果变大,元素具体像素值不变,css 像素的面积变大
移动端缩放 (缩放的是 布局视口,一旦 width 和 initial-scale 产生冲突,总是大的那一个生效)
- 放大
css 像素 面积变大,元素像素值不变,
单个 css 像素的物理像素变多
视觉视口 中装的 css 像素个数变少,视觉视口 变小
- initial-sscale css 像素的面积的改变
- 系统放大 2 ,布局视口由 375 变成 187.5: 相当于景观本身不变,人走近后视觉范围变小,看到的景观放大了
- 系统缩小 0.5 ,布局视口由345变成 750: 相当于景观本身不变,人走远,视觉范围变广,看到的景观缩小了
- 缩小
css 像素 面积变小,元素的像素值不变
单个 css 像素 的物理像素变少
视觉视口 中 css 像素个数变多,视觉视口 变大
mobile_缩放的更多相关文章
- ImageView缩放选项
ImageView.ScaleType 将图片边界缩放到所在view边界时的缩放选项. Options for scaling the bounds of an image to the bounds ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等
在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚 ...
- Win10 字体模糊解决(DPI缩放禁用),设置默认输入法英文
电脑坏了 , 换了新电脑, 但是新电脑,死活不能装win7, 装都不能装!!!郁闷了 好多地方字体模糊了,百般设置都不好看, 后来远程桌面到win2008server, 发现,在远程桌面里面居然很清晰 ...
- 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...
- 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...
- 缩放因子和UI设计
一.PPI 1.像素密度PPI:PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目. 根据勾股定理(直角三角形两边为a和b,斜边为c, ...
- CSS实现图片缩放特效
今天是感恩节,祝大家感恩节快乐哦!最近天冷了,大家注意保暖哟.下面一起看看小颖写的demo吧. html代码: <!DOCTYPE html> <html> <head& ...
- CSS float 定位和缩放问题
今天调试一个看起来很简单的前端问题,但却花了太多的时间,示例代码: <!DOCTYPE html> <html> <head> <title></ ...
随机推荐
- NOI-OJ 1.13 ID:34 确定进制
整体思路 对于任意的p,q,r,可能使得p*q=r的最小进制应该是p,q,r三个数的所有数位中最大的数字+1,例如,6,9,42三个数中所有数位中最大的数字是9,故可能成立的最小进制是9+1,即10. ...
- js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)
目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...
- Generator和Coroutine学习
简单的生产者消费者模型 #!/usr/bin/python2.7 def consumer(): while True: newn = yield print 'Consumer : {}'.form ...
- Unity3D 热更新方案总结
如何评价腾讯在Unity下的xLua(开源)热更方案? Unity 游戏用XLua的HotFix实现热更原理揭秘 腾讯开源手游热更新方案,Unity3D下的Lua编程 [Unity]基于IL代码注入的 ...
- centos7.6环境下编译安装tengine-2.2.2的编译安装
centos7.6环境下编译安装tengine-2.2.2的编译安装 .获取tengine2..2的源码包 http://tengine.taobao.org/download/tengine-2.2 ...
- Error: Could not find or load main class Test
问题描述 Linux 环境下运行 Java 程序时,执行 javac Test.java 生成 Test.class 文件,再执行 java Test 时报错:Error: Could not fin ...
- Java的家庭记账本程序(J)
日期:2019.3.9 博客期:041 星期六 这次就来看看我使用全新的模板写的家庭记账本程序!本次附带配色样式!作为本周的学习进度条吧!明天再研究微信小程序的方法! 这一次的记账本程序加了很多功能! ...
- 十三python基础之socket编程
阅读目录 一 客户端/服务器架构 二 osi七层 三 socket层 四 socket是什么 五 套接字发展史及分类 六 套接字工作流程 七 基于TCP的套接字 八 基于UDP的套接字 九 粘包现 ...
- js属性对象的hasOwnProperty方法
Object的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性. 判断自身属性是否存在 var o = new Object(); o.prop = 'ex ...
- java的编译过程
用记事本编写两个java文件 第一个Employee.java import java.io.*; public class Employee{ String name; int age; Strin ...