移动 web 问题 &amp ;测试 |学习笔记

简介: 快速学习 移动 web 问题 &amp ;测试

开发者学堂课程【移动 Web 前端开发:移动 web 问题  & ;测试】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8394


移动 web 问题  & ;测试

 

一、适配问题及解决方案

1.适配问题原因:屏幕尺寸不一

2.解决方案

在《京东商城》移动站中是用的是百分比自适应布局,也就是流式布局。

Pc 端自适应效果放在移动端不可用,因为移动端有一个 viewport 视口的概念,移动端网页浏览和pc 端不一样。

同时需要对移动端的 viewport 视口进行设置就能达到适配的目的。

3.所以进行移动  web 开发之前,需要认识:

1流式布局

2viewport

4.在做移动端开发的时候要明白,移动端在桌面浏览器开发的的时候怎么样测试:

在网站移动窗口上按下 F12 ,这时候需要去测试看达不达到适配,使用设备模拟器。

模拟器功能:点开类似手机图标可以在移动设备上预览。

点击  Device(设备) 下方有一排刻度表示当前网页的宽度并且单位是 px。

  中可以选择设备,切换设备来测试当前网页在各种设备上是否达到适配。Portrait  表示选择横竖屏,Screen表示屏幕大小单位是 px。2表示屏幕像素比。Zoom to fit  表示让模拟器完全显示在浏览器窗口内。Network 表示切换当前网络。

相关文章
|
2月前
|
JavaScript
web学习笔记(二十)
web学习笔记(二十)
18 0
|
6天前
|
运维 Java 测试技术
Spring运维之boo项目表现层测试加载测试的专用配置属性以及在JUnit中启动web服务器发送虚拟请求
Spring运维之boo项目表现层测试加载测试的专用配置属性以及在JUnit中启动web服务器发送虚拟请求
13 3
|
27天前
|
XML Web App开发 Java
【软件测试】关于Web自动化测试
【软件测试】关于Web自动化测试
|
16天前
|
存储 关系型数据库 MySQL
Baidu Comate Web在线出题能力测试——MySQL出题能力
Baidu Comate Web在线出题能力测试——MySQL出题能力
18 0
|
2月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
22 0
|
2月前
|
存储 JSON JavaScript
web学习笔记(二十八)
web学习笔记(二十八)
20 0
|
2月前
web学习笔记(二十七)PC端网页特效
web学习笔记(二十七)PC端网页特效
17 0
|
2月前
|
JavaScript 前端开发 Go
web学习笔记(二十六)
web学习笔记(二十六)
19 0
|
2月前
|
JavaScript 前端开发 内存技术
web学习笔记(二十五)BOM开始
web学习笔记(二十五)BOM开始
20 0
|
2月前
|
JavaScript
web学习笔记(二十四)
web学习笔记(二十四)
19 0