移动端H5开发基础

移动端H5开发基础文章目录前言一、移动端屏幕相关概念1.屏幕尺寸2.屏幕分辨率3.屏幕像素密度(ppi=pixelsperinch)二、像素1.物理像素2.CSS像素3.设备独立像素4.位图像素5.像素比(dpr)三、视口1.布局视口2.视觉视口3.理想视口三、缩放行为1.用户缩放2.系统总结前言随着移动端H5需求场景越来越多,例如微信公众号中H5页面的开发,APP中内嵌H5页面等,移动端H5开发基础知识和技巧是前端开发工程师必备的技能~一、移动端屏幕相关概念1.屏幕尺寸.


前言

随着移动端H5需求场景越来越多,例如微信公众号中H5页面的开发,APP中内嵌H5页面等,移动端H5开发基础知识和技巧是前端开发工程师必备的技能~


一、移动端屏幕相关概念

1. 屏幕尺寸

手机屏幕对角线的长度,单位:英寸,1英寸=2.54厘米
在这里插入图片描述

2. 屏幕分辨率

横纵向上的像素点(物理像素)数(个数),1px=1个像素点,也称物理像素,例如iphone6的屏幕分辨率为:750*1336

3. 屏幕像素密度(ppi = pixels per inch)

与【屏幕尺寸】和【屏幕分辨率】有关,即每英寸所拥有的像素数量,决定了手机清晰度。

二、像素

1. 物理像素

屏幕分辨率,是呈像的最小单位

2. CSS像素

  • web开发的最小单位,一个CSS像素在移动设备上最终会转成物理像素去呈像
  • 一个CSS像素占用多少个物理像素,取决于【设备特性】、【用户缩放行为】

3. 设备独立像素

  • 是一个抽象层,是设备对接CSS像素的接口,一旦CSS像素与设备独立像素挂钩(width=device-width),dpr才有意义。
  • 在PC web开发中无意义,无此概念。

4. 位图像素

1个位图像素对应一个设备独立像素,图片才能完美清晰的展现

5. 像素比 (dpr)

  • 【单方向】占满屏幕物理像素个数/ 占满屏幕设备独立像素个数 = devicePixelRatio
  • 获取像素比:window.devicePixelRatio
  • iPhone6 物理像素(分辨率)是750,设备独立像素是375,dpr=2

在这里插入图片描述

三、视口

1. 布局视口

  • 决定网页布局
  • 由于布局宽度大于大部分手机屏幕的宽度,为了将页面显示完全,只能对原来的页面进行缩放,不然就需要左右拖动来浏览。(大部分浏览器默认采用缩放方式)
  • document.documentElement.clientWidth 布局视口宽度,无兼容性问题

2. 视觉视口

  • 用户正在看到的网页的区域
  • 缩小页面,看到的网站区域将变大,视觉视口也会变大;同理,放大网站,网站区域将缩小,此时视觉视口也会变小。
  • var visual = window.innerWidth 视觉视口,接近全部支持

3. 理想视口

  • 布局视口和视觉视口一样大
  • 设置如下:
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

三、缩放行为

1. 用户缩放

  • 用户手动放大:1个CSS像素面积变大,区域内CSS像素个数减少,视觉视口尺寸变小
  • 移动端,用户缩放影响视觉视口的尺寸(布局视口影响布局(块换行等),引起重绘等,所以改变的是视觉视口)

2. 系统

  • 参照理想视口进行缩放,改变布局视口和视觉视口
  • meta: initial-scale=1.0

总结

移动端和PC端比,有很多特有的概念需要理解。理解了这些基础概念,才能掌握移动端H5开发技巧~

今天的文章移动端H5开发基础分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/33222.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注