开发者学堂课程【移动 Web 前端开发:移动 web 问题 & ;测试】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8394
移动 web 问题 & ;测试
一、适配问题及解决方案
1.适配问题原因:屏幕尺寸不一
2.解决方案:
在《京东商城》移动站中是用的是百分比自适应布局,也就是流式布局。
Pc 端自适应效果放在移动端不可用,因为移动端有一个 viewport 视口的概念,移动端网页浏览和pc 端不一样。
同时,需要对移动端的 viewport 视口进行设置就能达到适配的目的。
3.所以进行移动 web 开发之前,需要认识:
(1)流式布局
(2)viewport
4.在做移动端开发的时候要明白,移动端在桌面浏览器开发的的时候怎么样测试:
在网站移动窗口上按下 F12 ,这时候需要去测试看达不达到适配,使用设备模拟器。
模拟器功能:点开类似手机图标可以在移动设备上预览。
点击 Device(设备) 下方有一排刻度表示当前网页的宽度并且单位是 px。
在 中可以选择设备,切换设备来测试当前网页在各种设备上是否达到适配。Portrait 表示选择横竖屏,Screen表示屏幕大小单位是 px。2表示屏幕像素比。Zoom to fit 表示让模拟器完全显示在浏览器窗口内。Network 表示切换当前网络。