移动端web开发流世布局_汪刚_2023.4.25

• 今日学习内容：
• 1.概念
• PC常见浏览器：QQ、UC、edge、谷歌、火狐、苹果浏览器等等。
• 移动端常见浏览器：QQ浏览器、UC浏览器、百度手机浏览器、夸克浏览器、搜狗浏览器等等
• 国内的浏览器的内核都是基于webkit内核修改过来的，所以如果有需要处理的兼容性问题，就主要处理webkit内核的兼容性即可。
  

• 手机屏幕现状
  
  • 安卓手机的主要的分辨率：
    
    • 480×800、480×854、720×1280、1080×1920、2700x1220像素等等。
      
  • 苹果手机的主要分辨率
    
    • 640×960、640×1136、750×1334、1242×2208、2556 x 1179等等。
      
  • 作为开发来说，我们不需要太多的关注分辨率的问题，因为正常去开发网页的时候都是用px尺寸单位。
    
• 移动端的调试方法
  
  • 1、使用谷歌开发者工具 Chrome DevTools的模拟手机调试
    
  • 2、搭建本地服务器，手机和服务器在一个局域网内
    
  • 3、使用外网服务器，直接用IP来进行访问
    
• 2.Live Server的基本使用
  
  • 1、下载插件
    
  • 2、修改IP为自己电脑的IP地址
    
    • 查询IP，打开CMD 输入ipconfig
      
    • 将ip地址填写到自己的live server服务中
      
  • 3、通过live server打开网页即可，注意默认的端口是5500  如果端口被占用需要先修改端口
    
  3.移动端视口。

• 视口（viewport）
  
  • 就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
    

• 布局视口
  
  • 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起PC端页面在手机上的显示问题，IOS 和 Android都是980px，所以PC端的页面在手机上显示元素看起来都比较小，一般情况下可以通过手动来缩放网页。
  • 指的是用户正在看到的网站的区域，注意：是正在看到的网站区域，不一定是网站的全部区域，我们是可以通过缩放来控制视觉视口的，但是不会影响布局视口，布局视口仍然是原来的尺寸。
  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定的视口，需要手动添加meta标签来控制视口的设置
  • meta视口标签的主要目的：布局视口和视觉视口的宽度保持一致，简单来说就是设备有多宽，移动端页面的布局页面就有多宽。