移动端开发入门--基础知识

1、一些概念

dp, pt

device-independent pixels 设备无关像素, 基于设备内的坐标系统测量的物理单位, 代表了一个可以由程序使用的虚拟像素, 然后由底层系统转换成逻辑像素(维基百科上拿来的, 翻不通。。。)

dpr

devicePixelRatio 设备像素缩放比, 可以由window.devicePixelRadio获得

视口

视口的功能是约束<html>元素, 它是网页的最顶层容器, <html>元素继承了视口的宽度, 在桌面系统中视口的尺寸固执的等于浏览器窗口(window)的尺寸,因为它无法被css改变. 然而, 在移动设备上, 情况要复杂的多, 移动设备的浏览器视口有三个, layout-viewport, visual-viewport, ideal-viewport.

layout-viewport

布局视口, 浏览器厂商为了完整显示为PC设计的页面而制造的虚拟层, 宽度比浏览器宽度要大, 具体由设备厂商决定.

layout-viewport 的宽度可以由下面的js得到

var width = document.documentElement.clientWidth;

以下是一些设备的默认视口尺寸

再贴一张布局视口的图, 便于理解

大部分移动设备浏览器默认会完全缩放页面，这样的话 layout－viewport 完全等于 visual－viewport，整个 layout-viewport 完全被缩放呈现在浏览器窗口的可视区.就像这样:

用户不得不放大页面才能正常查看网页

visual-viewport

视觉视口, 浏览器的可视区域, 用户可以缩放来调整其大小, 但不会改变布局视口的尺寸

visual-viewport的宽度可以由以下js得到

var width = window.innerWidth;

ideal-viewport

理想视口, 浏览器能够完美适配移动设备的视口, 所谓完美适配就是用户无需缩放和使用滚动条就能看到网页的全部内容, 并且文字和图片的大小不管在何种分辨率下都能显示一样.

理想视口的尺寸因设备不同而不同, 所有iPhone设备的ideal-viewport都为320px, 无论它的屏幕宽度是多少.

也就是说 ideal-viewport的宽度就等于屏幕的宽度

2、meta标签

属性列表：

width: device-width | 数值

initial-scale: 初始缩放比例,

maximum-scale|minimum-scale: 最大/最小缩放比例

user-scalable: no|yes

将当前viewport设置成 ideal-viewport

<meta name="viewport" content="width=device-width">

或者

<meta name="viewport" content="initial-scale=1">

这里间接说明: initial-scale 是相对于 ideal-viewport 来进行缩放的

注意:

当 initial-scale 与 width 冲突时, width 和 ideal-viewport 哪个大就使用哪个
但是, 在uc9 当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度

因此较完美写法应该是:

<meta name="viewport" content="initial-scale=1, width=device-width">

3、缩放

上面提到, 缩放是相对于 ideal-viewport 来缩放的, 意思是说不管 meta 标签中的 width 设置为多少, 假设 ipone4s 中将meta width 设置为400, initial-scale 设置为 3, 页面不是基于400来放大, 而是基于320来放大的.

这里缩放的是visual-viewport的尺寸, 缩放比例越大, visual-viewport 的尺寸越小, 举个栗子：

ideal-viewport = 320px, initial-scale = 2, visual-viewport的宽度为 320px / 2 = 160px;

缩放并不会改变屏幕的宽度(废话啊), 只是拉伸了一个css像素, 本来一个css像素只占1个物理像素, 由于页面被放大了两倍, 一个css像素现在要占4(2*2)个物理像素, 所以屏幕可视区也就是 visual-viewport 的宽度相当于缩小到了原来的一半

注意：

在iphone和ipad上, 无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale这个值，以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条.

iPhone下 layout-viewport = 980, ideal-viewport = 320

initial-scale = ideal-viewport / layout-viewport;

默认值为 0.33左右, 当我们设置了 initial-scale, 浏览器就不会使用这个这个默认值.

4、一些尺寸

屏幕尺寸

screen.width/screen.height

由上面表达式的到的是用 device-width 表示的屏幕尺寸, 不过这个尺寸对我们意义不大

浏览器窗口尺寸

window.innerWidth/window.innerHeight

由上面表达式得到的是用 css pixels 表示的尺寸, 当用户进行缩放时该尺寸会发生变化, (在Opera中, window.innerWidth/innerHieght 得到的是用设备像素表示的, 所以用户缩放时这个尺寸不会发生变化).

注意：所有测得的浏览器尺寸都包括滚动条的宽度.

滚动尺寸

window.pageXOffset/pageYOffset

由上面表达式获取的尺寸不会因为用户的缩放而改变.

移动设备浏览器上的视口宽度

document.documentElement.clientWidth

通过上面的表达式可以获取viewport的宽度, 这里有一个特殊情况, 我们知道 document.documentElement 表示 html 元素, 但是 document.documentElement.clientWidth表示的是 viewport 的宽度而不是 html 元素的宽度.

那么, 我们如何获取 html 元素的尺寸啊, 答案是 document.documentElement.offsetWidth, 如果我们设置html元素的宽度, 可以用 offetWidth 来获取到.

document.documentElement.clientWidth 与 window.innerWidth 的区别在于前者不包含滚动条的宽度.

事件坐标

pageX/Y 返回相对于 html 元素的坐标（css pixels）

clientX/Y 返回相对于 viewport 的坐标 (css pixels)

screenX/Y 返回相对于屏幕的坐标 (device pixels)

绝大多数情况使用的都是 pageX/Y, 少数情况使用 clientX/Y , screenX/Y 几乎不会用到

参考网址：viewport详解-简书, A tale of two viewports - part one, A tale of two viewports - part two

转载于:https://www.cnblogs.com/walle2/p/4813909.html

移动端开发入门--基础知识相关推荐

音视频开发入门基础知识（视频入门篇）
RTSP实时音视频开发实战课程:<RTSP实时音视频开发实战> 音视频开发入门基础知识(音频入门篇) 目录一.前言二.视频采集和显示三.视频常见的格式四.RGB转YUV和YUV转R ...
移动web开发入门—基础知识、自适应布局、调试
之前没做过移动端web开发,最近接手的一个小项目是做微信公众号,需要考虑手机适配.UI给出的设计稿是一般是基于iphone手机做的(15年之后是基于ipone6),我们的UI是基于iphone6来做的 ...
音视频开发入门基础知识（音频入门篇）
RTSP实时音视频开发实战课程:<RTSP实时音视频开发实战> 音视频开发入门基础知识(音频入门篇) 目录前言音频的采集和播放音频常见的格式音频的编码前言在音视频开发入门基础知 ...
电子入门基础知识之：多路选择开关(MUX)
原文地址::http://www.51hei.com/bbs/dpj-50167-1.html 相关文章 1.电子入门基础知识之:多路选择开关(MUX) ----http://www.picmcu.c ...
HTML5：移动端开发入门
HTML5:移动端开发入门一.前言常见的移动端开发分为移动版网站和响应式设计. 移动端开发可以让技术人员专注于移动端的页面优化,而无需在意桌面版的兼容,但页面一旦改动内容,维护成本就翻倍了: 响应 ...
硬件工程师入门基础知识（一）基础元器件认识（二）
硬件工程师入门基础知识 (一)基础元器件认识(二) 1.二极管 2.三极管 3.MOS管 4.IGBT 5.晶振 tips:学习资料和数据来自<硬件工程师炼成之路>.百度百科.网上资料. ...
学单片机有前景吗？单片机入门基础知识
任何一个行业,都难免会看到一群喷子,喷行业辣鸡,喷职业苦逼. 最近看到很多喷单片机这个行业的,说这个行业工资低,学的东西又多,没前途. 还不如去学习纯软件,收入上限高. 一.无际对这个行业的看法(当小 ...
Spark —— 闪电般快速的统一分析引擎 —— 入门基础知识
Spark 入门基础知识 Spark 的特点速度快使用方便通用兼容 Spark 基础下载独立部署模式(Standalone) 弹性分布式数据集 Scala shell 1. 数组中的最值: ...
Python培训入门基础知识学什么?
Python培训基础知识主要是针对一些零基础的同学安排的,虽说Python是相对比较简单的一门编程语言,但是没有基础的同学还是要进行系统的学习,那么Python培训入门基础知识学什么呢?来看看下面小编 ...

移动端开发入门--基础知识

移动端开发入门--基础知识相关推荐

最新文章

热门文章