菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 移动端的基础-陈旭辉-20230428 [打印本页]

作者: 陌殇 时间: 2023-5-3 11:51
标题: 移动端的基础-陈旭辉-20230428
一、学习内容

浏览器现状：
1.PC常见浏览器：QQ、UC、edge、谷歌、火狐、苹果浏览器等等。
2.移动端常见浏览器：QQ浏览器、UC浏览器、百度手机浏览器、夸克浏览器、搜狗浏览器等等
3.国内的浏览器的内核都是基于webkit内核修改过来的，所以如果有需要处理的兼容性问题，就主要处理webkit内核的兼容性即可。
手机屏幕现状:
1.安卓手机的主要的分辨率：480×800、480×854、720×1280、1080×1920、2700x1220像素等等
2.苹果手机的主要分辨率：640×960、640×1136、750×1334、1242×2208、2556 x 1179等等。
移动端的调试方法：
1.使用谷歌开发者工具 Chrome DevTools的模拟手机调试
2.搭建本地服务器，手机和服务器在一个局域网内
3.使用外网服务器，直接用IP来进行访问
移动端的视口问题：
1.视口：就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
2.布局视口：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起PC端页面在手机上的显示问题，IOS 和 Android都是980px，所以PC端的页面在手机上显示元素看起来都比较小，一般情况下可以通过手动来缩放网页。
3.视觉视口：指的是用户正在看到的网站的区域，注意：是正在看到的网站区域，不一定是网站的全部区域，我们是可以通过缩放来控制视觉视口的，但是不会影响布局视口，布局视口仍然是原来的尺寸
4.理想视口：为了使网站在移动端有最理想的浏览和阅读宽度而设定的视口，需要手动添加meta标签来控制视口的设置。meta视口标签的主要目的：布局视口和视觉视口的宽度保持一致，简单来说就是设备有多宽，移动端页面的布局页面就有多宽。
5.meta视口标签的使用：
width:宽度设置的是viewport宽度，可以设置成device-width的特殊值
initial-scale:初始的缩放比例设置为大于0的数字，一般是1
maximum-scale:最大的缩放比例，设置为大于0的数字，一般是1
minimum-scale:最小的缩放比例，设置为大于0的数字，一般是1
user-scalable:是否允许用户缩放，yes/1 或者 no/0
物理像素和物理像素比
1.物理像素点指的是屏幕显示的最小颗粒，是真实存在的，在设备出厂的时候就设置好的，比如iphone14 pro 的是2556 x 1179
2.实际开发过程中一个px单位不一定是等于一个物理像素点的
3.因为有物理像素比的存在，将一张100px×100px的图片放到手机里会按照物理像素比进行放大。
4.如果出现了图片模糊的情况，我们一般会按照如下方式解决
如果要将一个100×100的图片放到移动端，假设物理像素比是2,就可以将这个图片先缩小为50px×50px的图片，然后再进行插入即可。
多倍图
1.当物理像素比是2的时候，那么可以将图片进行缩小2倍，然后进行使用的方式来让图片更加清晰
2.如果物理像素比3的时候，那么可以将图片缩小3倍，然后进行使用
3.所以倍图的使用是根据物理像素比的变化而变化的。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)