移动端开发基础

大大大石头
452 阅读8分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

移动端开发基础

移动WEB开发基础

移动浏览器现状

移动端浏览器：

  • UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。
  • 国内的UC、百度等浏览器都是根据webkit修改过来的内核，目前尚无自助开发内核，

所以目前做移动端开发只需要兼容主流浏览器即可，处理webkit内核即可

手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重。

  • Android设备有多种分辨率: 480x800, 480x854, 540x960, 720x1280, 1080x1920等 ,还有传说中的2K, 4k屏。
  • 近年来iPhone的碎片化也加剧了,其设备的主要分辨率有: 640x960, 640x1136,750x1334, 1242x2208等。

作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px（开发尺寸）

常见的移动端屏幕尺寸

可参考https://materialio/devices/

作为前端开发，不建议大家去纠结dp. dpi, pt, ppi等单位。

需要我们关心的时dpr（物理像素比）

移动端调试方法

  • 使用谷歌浏览器调试工具模拟手机功能
  • 搭建WEB服务器，手机和服务器在同一局域网络，通过手机访问服务器
  • 使用外网服务器，使用IP或者域名

视口

视口(viewpor ) 就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。

布局视口layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

IOS, Android基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小（默认压缩），一般默认可以通过手动缩放网页。

视觉视口visual viewport

字面意思，它是用户正在看到的网站的区域。注意:是网站的区域（相当于就是屏幕的大小），我们可以通过缩放去操作视觉视口，但会影响布局视口，布局视口仍保持原来的宽度。

理想视口ideal viewport

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  • 理想视口，对设备来讲，是最理想的视口尺寸
  • 需要手动添写<meta>视口标签通知浏览器操作
  • <meta>视口标签的主要目的：布局见口的度应 该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

meta视口标签

物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750* 1334

我们开发时候的1px不是一定等干1个物理像素的，PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同

一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

例如同样的300px的元素，在PC端可能占有300p像素点，但是到了手机上，可能会占有600像素点

常见设备尺寸：

启动图尺寸（物理）机型倍数开发尺寸
320x480iPhone 3GS@1x320x480
640*960iPhone4sDefault@2x320x480
640x1266iPhone5sDefault-568h@2x320x568
750x1334iPhone6.7.8Default-667h@2x375x667
1242x2208iPhonePlus (6+/ 7+/8+ )Default- 736h@3x414x736
1125x2436iPhoneX、XSDefault-812h@3x375x812
828x1792iPhoneXRDefault-828h@2x414x896
1242x2688iPhoneX MaxDefault-1242h@3x414x896

物理像素比之所以存在，是因为新技术（Retina）的出现，可以把更多的物理像素点压缩到一块屏幕内，这个时候我们在使用1：1的像素比会导致一些问题，比如显示过小，所以使用物理像素比使一个px可以占用多个像素点

多倍图

需求：

我们要在手机上显示一个50x50的图片，如果直接使用50x50px，在pc端会占用50x50个像素点，但是在手机端会占用100x100个像素点，会导致图片模糊失真

解决方案：

使用一张100x100的图片替换掉原来的图片，再设置图片尺寸为50x50，这样在手机端还是会占用100x100个点，但是这张图片会更清晰

在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题（包括背景图）

通常使用二倍图，因为 iPhone 6\7\8 的影响，但是现在还存在 3倍图4倍图的情况，这个要看实际开发公司需求

在工作中，我们切图的时候不要直接从开发设计图切图，要从启动图（原始）切图，因为开发图是后期人工缩小的

多倍图切图

  • @3X 3倍图
  • @2X 2倍图
  • @1X 1倍图原图

移动端开发方法选择

主流方案：

  • 单独制作移动端页面（主流），不需要专门涉及移动端兼容问题，通常情况下，网址域名前面加m（mobile）可以打开移动端，通过判断设备，如果是移动端，会自动跳转到移动端
    • 例如京东移动端、淘宝移动端、苏宁移动端
  • 响应式兼容移动端，在PC端和移动端共用一套代码，只不过在不同的宽度下，样式会自动适配，缺点是制作较麻烦，需要花很多精力去调试兼容性问题
    • 例如三星官网

目前更加推荐单独制作移动端页面的方法

移动端常见问题及解决方案

兼容性

移动端浏览器内核基本以webkit为主，因此我们就考虑webkit兼容性问题，我们可以放心的使用H5和CSS3样式。同时浏览器的私有前缀只需要考虑加-webkit-即可

CSS初始化 - normalize.css

移动端CSS初始化推荐使用normalize.css.是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统-,是一种现代的、为HTML5准备的优质替代方案。

优点:

  • 保护了有价值的默认值
  • 修复了浏览器的bug ,解决了浏览器的不一致的默认样式
  • Normalize.css是模块化的，提高了易用性
  • Normalize.css拥有详细的文档

官网地址: necolas.github.io/normalize.c…

CSS3盒子模型box-sizing

传统模式宽度计算：盒子的宽度= CSS中设置的width + border + padding

CSS3盒子模型（border-box）：盒子的宽度 = CSS中设置的宽度width里面包含了border和padding，也就是说，我们的CSS3中的盒子模型，padding 和border不会撑大盒子了

盒模型选择

移动端可以全部使用CSS3盒子（content-box）

PC端如果需要完全兼容，建议使用传统盒模型（content-box），如果不考虑兼容性，可以选择全部是用CSS3盒模型（border-box）

特殊样式

/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;

/*（通配符）点击高亮我们需要清除清除设置为transparent完成透明 */
*{
-webkit tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观IOS上加上这个属性才能给按钮和输入框自定义样式（只需要给input标签即可） */
input {
  -webkit appearance: none;
}

/* 禁用长按页面时的弹出菜单 */
img,a { 
  -webkit-touch-callout: none;
}

移动端技术选型

单独制作移动端布局

  • 流式布局(百分比布局)
  • flex弹性布局(强烈推荐)
  • less+rem+媒体查询布局
  • 混合布局

响应式布局兼容移动端

  • 媒体查询（判断设备宽度）
  • bootstrap（框架）

建议

建议将来开发过程中，是用一种技术选型为主要选型，其他技术可作为辅助

avatar
文章
阅读
粉丝