移动网页设计基础（viewport）

最新推荐文章于 2024-01-11 16:51:01 发布

不做程序袁

最新推荐文章于 2024-01-11 16:51:01 发布

阅读量292

点赞数 1

分类专栏：移动端开发文章标签：移动开发

本文链接：https://blog.csdn.net/qq_44012757/article/details/109081769

版权

移动设备上的网页设计关键在于viewport的理解。viewport是设备显示网页的实际区域，通常默认宽度为980px或1024px，可能导致横向滚动。css中的1px在不同设备上并不一致，苹果设备尤其明显。通过meta标签可以控制viewport，例如设置宽度等于设备宽度，初始缩放为1，最大缩放为1，并禁止用户缩放。使用rem作为尺寸单位，能方便地实现屏幕铺满，且大部分现代浏览器支持。对于旧设备，如320px宽的屏幕，常将其分为16份进行计算，但高分辨率设备可能需要考虑小数点后的精度问题。

摘要由CSDN通过智能技术生成

pc端，屏幕1200两端留白
在PE端就不行，首先没有1200px的宽度，其次不能留白，就需要在手机屏幕上铺满内容
viewport
在移动设备上进行网页的重构或者开发，首先我们就要搞明白viewport。只要搞明白概念及其相关的meta标签的使用，才能更好的让网页适配或者响应不同的分辨率的移动设备

viewport概念

设备上屏幕能用来显示我们网页的那一块区域
获取视口大小：document.documentElement.clientWidth
移动设备上的浏览器会把自己默认的视口大小设为980px或者1024px（由设备决定）
各个浏览器默认的视口大小
在这里插入图片描述

使用默认视口给网页带来的后果：出现横向滚动条
因为浏览器的可是区域是比默认的视口要小

二.
css中的1px不等于设备的1px，css中1px在不同设备或不同环境下都不一样。在早先的移动设备中（苹果3上，css的1px确实等于设备上的1px），但是在苹果4开始，苹果公司高分子显示屏，会使分辨率提高一倍，从而使得屏幕更加的清晰，但是屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素提高了一倍，这个时候，css中的1px是等于两个物理像素。
双指放大功能，如果用户把页面放大一倍，那么css中的1px也会相应