移动端基础

2021/12/30 6:07:23

本文主要是介绍移动端基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

@

目录
  • 1. 浏览器现状
  • 2. 手机屏幕的现状
  • 3. 常见移动端屏幕尺寸
  • 4. 移动端调试方法


1. 浏览器现状

PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器等

移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器等

国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。

总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。



2. 手机屏幕的现状

  • 移动端设备屏幕尺寸非常多,碎片化严重。
  • Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920,2K,4k屏等。
  • 近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。
  • 作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是 px 。


3. 常见移动端屏幕尺寸

设备 尺寸(英寸) 开发尺寸(px) 物理像素比(dpr)
iphone3G 3.5 320*480 1.0
iphone4/4s 3.5 320*480 2.0
iphone5/5s/5c 4.0 320*568 2.0
HTC One M8 4.5 320*640 3.0
iphone6 4.7 375*667 2.0
Nexus 4 4.7 384*640 2.0
Nexus 5x 5.2 411*731 2.6
iphone6 plus 5.5 414*736 3.0
Samsung Galaxy Note 4 5.7 480*853 3.0
Sony Xperia Z Ultra 6.4 540*960 2.0
Nexus 7('12) 7.0 600*960 1.3
ipad Mini 7.9 768*1024 1.0

https://material.io/devices/



4. 移动端调试方法

  • Chrome DevTools(谷歌浏览器)的模拟手机调试
  • 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
  • 使用外网服务器,直接IP或域名访问


这篇关于移动端基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程