移动 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月前
|
SQL 安全 测试技术
Web应用程序安全测试
Web应用程序安全测试
|
2月前
|
Web App开发 编解码 前端开发
面试题22:如何测试Web浏览器的兼容性?
面试题22:如何测试Web浏览器的兼容性?
|
3月前
|
存储 缓存 监控
Web 应用程序性能测试核心步骤
Web 应用程序性能测试核心步骤
|
2天前
|
XML Web App开发 测试技术
python的Web自动化测试
【4月更文挑战第16天】Python在Web自动化测试中广泛应用,借助Selenium(支持多浏览器交互)、BeautifulSoup(解析HTML/XML)、Requests(发送HTTP请求)和Unittest(测试框架)等工具。测试步骤包括环境搭建、编写测试用例、初始化浏览器、访问页面、操作元素、验证结果、关闭浏览器及运行报告。注意浏览器兼容性、动态内容处理和错误处理。这些组合能提升测试效率和质量。
11 6
|
1月前
javaWeb服务详解(含源代码,测试通过,注释) ——web.xml
javaWeb服务详解(含源代码,测试通过,注释) ——web.xml
7 0
|
1月前
|
安全 测试技术 API
请描述在 Python WEB 开发中常用的测试方法。
请描述在 Python WEB 开发中常用的测试方法。
18 0
|
1月前
|
Web App开发 前端开发 测试技术
Web应用程序测试工具Selenium用法详解
Web应用程序测试工具Selenium用法详解
37 0
|
2月前
|
Java 测试技术 编译器
JMM测试利器-JCStress学习笔记
JMM测试利器-JCStress学习笔记
|
2月前
|
Web App开发 测试技术 数据安全/隐私保护
Web自动化测试工具Selenium
Web自动化测试工具Selenium
|
2月前
|
人工智能 前端开发 Java
软件测试/人工智能|熟练使用web控件定位技巧,提升测试工作效率!
软件测试/人工智能|熟练使用web控件定位技巧,提升测试工作效率!
197 1