HTML移动端的基本了解

最新推荐文章于 2024-05-05 06:51:11 发布

摸鱼小队

最新推荐文章于 2024-05-05 06:51:11 发布

阅读量1.1k

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_46324704/article/details/125899944

版权

文章目录

前言

前言

分享html移动端方面的基础知识

浏览器多样化，需要考虑兼容性的问题，传统方式布局比较繁杂

移动端浏览器大部分内核为webkit，不需要考虑兼容性的问题，且移动端可以放心使用flex弹性布局

视口就是显示页面内容的屏幕区域，视口可以分为布局视口(layout viewport)、视觉视口(visual viewport)、理想视口(ideal viewport)

<meta name="viewport" content="width=device-width,initial-sacle=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
width = device-width表示视口的宽度和设备保持一致
initial-scale表示视口默认缩放比例是1.0
user-scalable表示不允许用户自行缩放
maximun-scale表示最大允许的缩放比例
minimum-scale表示最小允许的缩放比例

简单来说就是电脑屏幕的分辨率是物理分像素，比如高清屏1920*1080就是宽1920像素，高1080像素
在网页中经常用到px单位就是逻辑像素，这个像素使我们设置的
在pc端上，物理像素和逻辑像素比例1:1，而在移动端(iphone6/7/8环境)上物理像素和逻辑像素是2:1
就相当于pc端的布局在移动端上会被放大两倍，比如pc端一张50*50的图片在移动端环境下，会放大两倍，就变成100*100，导致图片清晰度下降。而如果放一张100*100的图片，设置宽高为50*50像素，再转到移动端后放大两倍，图片清晰度就不会下降，因为图片本身是100*100像素的
在其他情况下也有多倍图，2.6倍，3倍图等，只不过二倍图比较多一些