欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-24 20:15:28
...

0、关于web app

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

  1. 更新方便
  2. 跨平台的,

缺点:

  1. 用户比原生app体现差些,
  2. 无法手机里系统功能,弹窗,通知,
  3. 也无法获取手机里的本地资源,比如通讯录
    【移动端布局】1 -基本概念:设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置

1、移动端与pc端的区别

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

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


2、尺寸相关概念

2.1、设备像素(物理像素)

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

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

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

2.3、屏幕的尺寸

  1. 屏幕的尺寸,不是面积,而是屏幕对角线的长度,这个长度的单位是 英寸inch
  2. 1英寸inch = 2.54厘米cm
  3. 屏幕尺寸=屏幕斜边的像素/PPI (PPI - 每英寸上像素的数量)
    【移动端布局】1 -基本概念:设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置
    就像上图:计算屏幕尺寸: 屏幕尺寸=屏幕斜边的像素/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 - 每英寸(面积)上像素(设备像素)的数量

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

如下图,单位面积没变,里面的像素点更多了,ppi越高越清晰(苹果的高清屏被叫做视网膜屏)
【移动端布局】1 -基本概念:设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置

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

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

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

console.log(margin/5.5);	//400.52857637859967	PPI

2.5 像素比 - dpr

  1. 像素比DPR = 物理像素 / css像素 (之前说过css像素px 和 物理像素 pt 之间的关系就是 像素比
  2. 像素比的本质 : 一个css像素 占用 几个 物理像素,一个px 占 几个 pt
  3. 获取:window.devicePixelRatio
iphone6
		375 × 667		设备独立像素,屏幕尺寸  --css像素
		750 × 1334		设备像素,屏幕分辨率   -- 物理像素
		2				像素比
//DPR=物理像素/css像素	=> 2=750/css像素	=> css像素=750/2=375

4.像素比的作用: 保证高清屏能够正常的显示图片的大小;(保证高清屏 和普通屏显示的效果一样)

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

【移动端布局】1 -基本概念:设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置
理论上:ppi增加1倍后,每个物理像素的大小会缩小1/4,导致图片视觉上会变小1/4,如上图;
实际上:手机中显示并不是缩小的情况,而是如下图,即使ppi增加,导致每个物理像素的大小会缩小1/4, 所以我们可以把css像素变大,改成1px = 2pt,这样,图片视觉上大小一样了,但是图片会变模糊,所以我们不能这样改css像素,我们可以给一个大尺寸图片放进去,像上图我们给个原来图片尺寸*2的大小的图片就正常显示了
【移动端布局】1 -基本概念:设备像素、css像素、屏幕尺寸、像素密度ppi、像素比dpr、viewport、meta标签、样式重置


3、viewport

viewport - 视口(可视区窗口),通过meta标签设置

  1. 可以认为 html的宽度 就是viewport的宽度
  2. 未设置时,屏幕的宽度默认为980,但不同的型号也会不同
  3. 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">
  1. device-width是设备的实际宽度 – css像素,比如iphone6 这样设置后,viewport 宽度就是375
  2. initial-scale有值的情况下算页面的公式:缩放比 = css像素 / viewport宽度 viewport宽度 = css像素 / 缩放比
  3. width=device-widthinitial-scale=1 效果一样,当两个都写,哪个大用哪个的尺寸;

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

  1. 会有一些第三方的工具能够破坏user-scalable,比方说一些给父母的手机把文字放大的工具,就会有可能。不过一般是没有问题的
  2. 像iphone5下还会有黑边
  3. 所以写全了,可以避免一些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、移动端样式重置

  1. 禁止用户选中文字,安卓无效(在事件那章解决,包括长按的时候会出菜单,用阻止touchstart后的默认行为搞定)
    -webkit-user-select: none;
  2. 禁止长按弹出系统菜单
    -webkit-touch-callout: none;
  3. 去除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);
}
  1. 默认手机横竖屏切换的时候,字体大小会变; 切换横竖屏或者用户自己通过浏览器设置的话,可以改变字体的大小(需要给body下的所有元素)
    -webkit-text-size-adjust: 100%;
  2. 按钮在ios下都是圆角
    -webkit-appearance: none; //去掉button与input都会有个默认背景
    border-radius: 0; //去掉input有个默认圆角
  3. 修改placeholder的样式
	input::-webkit-input-placeholder{
		color:#000;	//默认的样式
	}
	input:focus::-webkit-input-placeholder{
		color:#f00;	//点击后的样式
	}
  1. 字体
    移动设备里没有微软雅黑的字体;
    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真机测试

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

  1. 手机中打开电脑的页面,一定要保证手机与电脑在同一wifi下
  2. win+ r 输入cmd打开命令行
  3. 输入ipconfigipv4地址
  4. 在浏览器中本地服务的ip 改为ipv4的地址
  5. 赋值地址后,百度里找二维码,生产二维码进行查看
相关标签: # 移动端布局