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_缩放的更多相关文章

  1. ImageView缩放选项

    ImageView.ScaleType 将图片边界缩放到所在view边界时的缩放选项. Options for scaling the bounds of an image to the bounds ...

  2. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  3. 纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等

    在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚 ...

  4. Win10 字体模糊解决(DPI缩放禁用),设置默认输入法英文

    电脑坏了 , 换了新电脑, 但是新电脑,死活不能装win7, 装都不能装!!!郁闷了 好多地方字体模糊了,百般设置都不好看, 后来远程桌面到win2008server, 发现,在远程桌面里面居然很清晰 ...

  5. 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

    前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...

  6. 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案

    花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...

  7. 缩放因子和UI设计

    一.PPI 1.像素密度PPI:PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目. 根据勾股定理(直角三角形两边为a和b,斜边为c, ...

  8. CSS实现图片缩放特效

    今天是感恩节,祝大家感恩节快乐哦!最近天冷了,大家注意保暖哟.下面一起看看小颖写的demo吧. html代码: <!DOCTYPE html> <html> <head& ...

  9. CSS float 定位和缩放问题

    今天调试一个看起来很简单的前端问题,但却花了太多的时间,示例代码: <!DOCTYPE html> <html> <head> <title></ ...

随机推荐

  1. NOI-OJ 1.13 ID:34 确定进制

    整体思路 对于任意的p,q,r,可能使得p*q=r的最小进制应该是p,q,r三个数的所有数位中最大的数字+1,例如,6,9,42三个数中所有数位中最大的数字是9,故可能成立的最小进制是9+1,即10. ...

  2. js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)

    目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...

  3. Generator和Coroutine学习

    简单的生产者消费者模型 #!/usr/bin/python2.7 def consumer(): while True: newn = yield print 'Consumer : {}'.form ...

  4. Unity3D 热更新方案总结

    如何评价腾讯在Unity下的xLua(开源)热更方案? Unity 游戏用XLua的HotFix实现热更原理揭秘 腾讯开源手游热更新方案,Unity3D下的Lua编程 [Unity]基于IL代码注入的 ...

  5. centos7.6环境下编译安装tengine-2.2.2的编译安装

    centos7.6环境下编译安装tengine-2.2.2的编译安装 .获取tengine2..2的源码包 http://tengine.taobao.org/download/tengine-2.2 ...

  6. Error: Could not find or load main class Test

    问题描述 Linux 环境下运行 Java 程序时,执行 javac Test.java 生成 Test.class 文件,再执行 java Test 时报错:Error: Could not fin ...

  7. Java的家庭记账本程序(J)

    日期:2019.3.9 博客期:041 星期六 这次就来看看我使用全新的模板写的家庭记账本程序!本次附带配色样式!作为本周的学习进度条吧!明天再研究微信小程序的方法! 这一次的记账本程序加了很多功能! ...

  8. 十三python基础之socket编程

      阅读目录 一 客户端/服务器架构 二 osi七层 三 socket层 四 socket是什么 五 套接字发展史及分类 六 套接字工作流程 七 基于TCP的套接字 八 基于UDP的套接字 九 粘包现 ...

  9. js属性对象的hasOwnProperty方法

    Object的hasOwnProperty()方法返回一个布尔值,判断对象是否包含特定的自身(非继承)属性. 判断自身属性是否存在 var o = new Object(); o.prop = 'ex ...

  10. java的编译过程

    用记事本编写两个java文件 第一个Employee.java import java.io.*; public class Employee{ String name; int age; Strin ...