【移动端布局】1 -基本概念：设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置

文章目录

0、关于web app
1、移动端与pc端的区别
2、尺寸相关概念
- 2.1、设备像素（物理像素）
- 2.2、CSS像素(设备独立像素，逻辑像素)
- 2.3、屏幕的尺寸
- 2.4、像素密度PPI - 每英寸（面积）上像素（设备像素）的数量
- 2.5 像素比 - dpr
3、viewport
4、meta 标签
5、移动端样式重置
6、webapp真机测试

0、关于web app

web app 可以认为就是一个手机(网)站
优点：

更新方便
跨平台的，

缺点：

用户比原生app体现差些，
无法手机里系统功能，弹窗，通知，
也无法获取手机里的本地资源，比如通讯录

1、移动端与pc端的区别

系统
pc：windows/mac（区别不大）
移动端：ios/android/windows（有区别）
浏览器
pc：区别很大 - 有浏览器兼容问题
移动端：区别不大 - 手机浏览器大部分是webkit内核，没有兼容问题，css3也支持
分辨率（尺寸）
pc：有区别
移动端：区别很大 - 分辨率在不同的设备里不一样

移动设备市场份额、分辨率等详情统计信息查看：手机相关信息统计

2、尺寸相关概念

2.1、设备像素（物理像素）

设备像素又叫物理像素，由一个个会发光的点组成，从出厂的时候物理像素就固定了，不会变了;
就像路边的显示屏
设备像素的单位是pt(点) – pt是绝对的单位， 1 pt = 1/72英寸（inch）;
手机屏幕里同理，一个个的发光点叫做设备像素，手机中的分辨率指的就是设备像素，出厂后设备像素是不变的
像iPhone6 的屏幕分辨率是750*1334，代表iphon6横向由750个像素点，纵向上有1334个像素点
所以准确来说分辨率不应该用px来表示，应该用pt : 750pt * 1334pt

2.2、CSS像素(设备独立像素，逻辑像素)

CSS像素是我们平时样式中的px，这是一个抽象的概念，是一个相对单位，大小是不固定的
css像素的大小 取决于设备像素的大小
我们切的图是针对我们的电脑，因为电脑上默认1px = 1pt
但是当我们在电脑上缩放比例的时候，比如放大到两百的时候，css像素也会改变，会变成1px = 2pt，也就是当电脑上缩放比例的时候，css像素会改变，样式里还是400px , 显示屏上会变成800px(pt), 所以css 像素是个相对单位，用户缩放会影响css像素的大小；
w3c规定：px 这个并不是大小的单位，不表示大小；而是一个视角的单位，表示角度；，具体查看详细信息

2.3、屏幕的尺寸

屏幕的尺寸，不是面积，而是屏幕对角线的长度，这个长度的单位是英寸inch
1英寸inch = 2.54厘米cm
屏幕尺寸=屏幕斜边的像素/PPI （PPI - 每英寸上像素的数量）

就像上图：计算屏幕尺寸： 屏幕尺寸=屏幕斜边的像素/PPI

//屏幕斜边的像素
const margin=Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2));    //屏幕斜边的像素console.log(margin);   //2202.9071700822983
console.log(margin/401);    //5.493534089980794 屏幕尺寸 ，约等于5.5英寸，PPI 是401
console.log(margin/5.5);    //400.52857637859967    PPI

2.4、像素密度PPI - 每英寸（面积）上像素（设备像素）的数量

ppi是一个定值，出厂后就固定了，是一个固定的参数
像素密度 PPI的值越高，代表在一定尺寸的屏幕上像素数量越多，屏幕越清晰 – 屏幕是否清晰，看PPI最直接，不用看分辨率

如下图，单位面积没变，里面的像素点更多了，ppi越高越清晰（苹果的高清屏被叫做视网膜屏）

同一尺寸下，ppi增加n倍，物理像素会增加n*n倍。同时每个物理像素的大小会缩小1/n，例如：PPI提高了一倍，那物理像素数量会提高4倍，每个物理像素的大小会缩小1/4
PPI = 屏幕斜边的像素 / 屏幕尺寸
点击查看不同机型分辨率，屏幕尺寸和 ppi

//屏幕斜边的像素
const margin=Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2));    //屏幕斜边的像素console.log(margin/5.5);   //400.52857637859967    PPI

2.5 像素比 - dpr

像素比DPR = 物理像素 / css像素 （之前说过css像素px 和物理像素 pt 之间的关系就是 像素比，）
像素比的本质：一个css像素占用几个物理像素，一个px 占几个 pt
获取：window.devicePixelRatio

iphone6375 × 667     设备独立像素，屏幕尺寸  --css像素750 × 1334       设备像素，屏幕分辨率   -- 物理像素2                像素比
//DPR=物理像素/css像素   => 2=750/css像素 => css像素=750/2=375

4.像素比的作用：保证高清屏能够正常的显示图片的大小；（保证高清屏和普通屏显示的效果一样）

点击查看不同手机型号的像素比

理论上：ppi增加1倍后，每个物理像素的大小会缩小1/4，导致图片视觉上会变小1/4，如上图；
实际上：手机中显示并不是缩小的情况，而是如下图，即使ppi增加，导致每个物理像素的大小会缩小1/4，所以我们可以把css像素变大，改成1px = 2pt,这样，图片视觉上大小一样了，但是图片会变模糊，所以我们不能这样改css像素，我们可以给一个大尺寸图片放进去，像上图我们给个原来图片尺寸*2的大小的图片就正常显示了

3、viewport

viewport - 视口（可视区窗口），通过meta标签设置

可以认为 html的宽度就是viewport的宽度
未设置时，屏幕的宽度默认为980，但不同的型号也会不同
用document.documentElement.clientWidth方法获取 viewport的值，窗口的宽度

content	视口里的相关设置
width	视口的宽度，值为一个正整数，或字符串device-width（设备的实际宽度 – css像素）。不建议设置数字（安卓设备有些不支持）
height	视口的高度（与width一至）- 一般不用管
user-scalable	是否允许用户进行页面缩放，值为no或yes，代表不允许与允许
initial-scale	页面初始缩放值，值为一个数字（可以带小数）。
minimum-scale	页面最小能够缩放的比例，值为一个数字（可以带小数）。
maximum-scale	页面最大能够缩放的比例，值为一个数字（可以带小数）。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

device-width是设备的实际宽度 – css像素，比如iphone6 这样设置后，viewport 宽度就是375
initial-scale有值的情况下算页面的公式：缩放比 = css像素 / viewport宽度 viewport宽度 = css像素 / 缩放比
width=device-width 和 initial-scale=1 效果一样，当两个都写，哪个大用哪个的尺寸；

注意：
1、有的时候大家会见到同时写了不允许缩放，又写了最小与最大能够缩放的比例，那这样不是冲突了，为什么都已经写了不允许缩放了，还要写那些？
原因：

会有一些第三方的工具能够破坏user-scalable，比方说一些给父母的手机把文字放大的工具，就会有可能。不过一般是没有问题的

像iphone5下还会有黑边

所以写全了，可以避免一些bug

2、ios10不支持user-scalable=no，后面事件解决（阻止document的touchstart的默认行为）

4、meta 标签

meta 标签 - 辅助型标签，本身没有任何作用，可以借助其他东西实现一些功能；

seo优化：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,图书、食品等数万个品牌优质商品.便捷、诚信的服务!">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

移动端常用meta标签：

禁止识别电话与邮箱(但是邮箱没效果)
<meta name="format-detection" content="telephone=no,email=no" />设置添加到主屏后的标题(ios)
<meta name="apple-mobile-web-app-title" content="标题">添加到主屏幕后，全屏显示，删除苹果默认的工具栏和菜单栏（无用）
<meta name="apple-mobile-web-app-capable" content="yes" />放在桌面上的logo
<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />启动时候的画面（无用）
<link rel="apple-touch-startup-image" href="logo_startup.png" />设置x5内核浏览器只能竖屏浏览（只有UC有效）
<meta name="x5-orientation" content="portrait" />设置x5内核浏览器全屏浏览
<meta name="x5-fullscreen" content="true" />设置UC浏览器只能竖屏浏览
<meta name="screen-orientation" content="portrait">设置UC浏览器全屏浏览
<meta name="full-screen" content="yes">
如果想屏蔽所有浏览器的横屏的话，需要在后面陀螺仪那章节讲

5、移动端样式重置

禁止用户选中文字，安卓无效（在事件那章解决，包括长按的时候会出菜单，用阻止touchstart后的默认行为搞定）
-webkit-user-select: none;
禁止长按弹出系统菜单
-webkit-touch-callout: none;
去除android下a/button/input标签被点击时产生的边框 & 去除ios下a标签被点击时产生的半透明灰色背景
-webkit-tap-highlight-color: rgba(0,0,0,0);

a,input,button{-webkit-tap-highlight-color: rgba(0,0,0,0);
}

默认手机横竖屏切换的时候，字体大小会变；切换横竖屏或者用户自己通过浏览器设置的话，可以改变字体的大小(需要给body下的所有元素)
-webkit-text-size-adjust: 100%;
按钮在ios下都是圆角
-webkit-appearance: none; //去掉button与input都会有个默认背景
border-radius: 0; //去掉input有个默认圆角
修改placeholder的样式

 input::-webkit-input-placeholder{color:#000;    //默认的样式}input:focus::-webkit-input-placeholder{color:#f00;  //点击后的样式}

字体
移动设备里没有微软雅黑的字体；
ios
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体

font-family: helvetica;

总结：

body{font-family: helvetica;  /*设置字体，这个字体一般都有，如果没有的话可以用自定义字体--作为字体文件加载进来，会消耗用户浏览*/margin: 0;
}
body *{-webkit-user-select: none;    /*禁止用户选中文字*/-webkit-touch-callout: none;  /*禁止长按弹出系统菜单*/-webkit-text-size-adjust: 100%;  /*防止手机横竖屏切换的时候，字体大小会变*/
}
a,input,button{-webkit-tap-highlight-color: rgba(0,0,0,0);   /*去除android下a/button/input标签被点击时产生的边框 & 去除ios下a标签被点击时产生的半透明灰色背景*/
}
button,input{-webkit-appearance: none;   /* 去掉button与input 默认背景*/border-radius: 0;  /*去掉input默认圆角*/
}
input::-webkit-input-placeholder{color:#000;   /*修改placeholder的样式--默认的样式*/
}
input:focus::-webkit-input-placeholder{color:#f00;   /*修改placeholder的样式--点击后的样式*/
}

6、webapp真机测试

真机测试：手机中打开电脑中的地址，而且地址是本地的，不是在线的，而且是真机测试，手机中会自动刷新

手机中打开电脑的页面，一定要保证手机与电脑在同一wifi下
win+ r 输入cmd打开命令行
输入ipconfig 找 ipv4地址
在浏览器中本地服务的ip 改为ipv4的地址
赋值地址后，百度里找二维码，生产二维码进行查看

【移动端布局】1 -基本概念：设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置相关推荐

iOS 苹果所有设备的系统、屏幕尺寸和像素
设备系统点(points) 屏幕尺寸倍数像素 iPhone iPhone 2GS IOS 1 3 ...
viewport meta 标签在手机浏览器上控制布局
什么是Viewport 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页 ...
（全解析）屏幕尺寸，分辨率，像素，PPI之间到底什么关系？
今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系.这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版,保证让你看得懂. 咱们从手机开始说起吧.先上一张图,给大家看 ...
屏幕尺寸，分辨率，像素，PPI之间到底什么关系？
转载,版权归原作者所有,因为网上输入这个名字有很多出处,我也不知道哪个才是最早的链接了,所以需要的自行百度今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系.这篇文章是 ...
我的Android进阶之旅------（全解析）屏幕尺寸，分辨率，像素，PPI之间到底什么关系？...
作者:马忠信,作者授权早读课发表,转载请联系作者. 原文链接:http://www.jianshu.com/p/c3387bcc4f6e# 互联网早读课:http://zaodula.com/arc ...
前端 - 屏幕尺寸，分辨率，像素，PPI 解析汇总
1.概念介绍 TBD 2.难重点理解 TBD 3.屏幕自适应 TBD 4.额外补充 TBD 5.参考 https://www.jianshu.com/p/c3387bcc4f6e# //(全解析)屏 ...
屏幕尺寸、分辨率、像素密度及其三者之间的关系
屏幕尺寸屏幕对角线的长度单位英寸,1英寸等于2.54厘米分辨率横纵向方向像素的大小纵向像素*横向像素,如1920px*1080px 单位像素(px) 像素密度指每英寸屏幕所拥有的像素的数量 ...
dpi和ppi换算_屏幕尺寸，分辨率，像素，ppi，dpi的关系
前言下图是苹果官方对iPhone 机型的介绍: 拿iPhone7 Plus来说: 屏幕尺寸:5.5英寸手机分辨率(像素):1920 (高)x 1080(宽) PPI:401 概念说明屏幕尺寸:表 ...
苹果手机屏幕尺寸、密度、开发尺寸、像素尺寸、倍图
转载于:https://www.cnblogs.com/CH520/p/9601165.html
移动端布局：视口viewport的理解
移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一 ...