快捷导航
蚂蚁部落 网站首页 前端教程 谷歌工具 查看内容

栏目导航

谷歌浏览器测试移动端网页

2017-8-12 14:47| 发布者: admin| 查看: 487| 评论: 0|来自: 蚂蚁部落

首先打开谷歌开发者工具的设备模式,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/150957w2idqizll61twlvw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击红框处可以实现设备模式和非设备模式的切换,切换后重新加载页面效果如下:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/151320k7z6jzh1lf12t661.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

蚂蚁部落的页面切换到移动端版本(当然网站必须具有移动版本,否则无效果)。

可视窗口控件:

使用顶部的可视窗口控件,可以针对各种设备测试网站,以及完全响应式。 

它有两种模式:

(1).Responsive(响应式) - 通过任意任何一个调节手柄自由调整可视窗口大小:

建议使用Responsive Mode(响应式模式)作为默认工作模式。

在网站和应用程序的开发期间使用它,并经常调整视口的大小,以创建一个自由的响应式设计,适应甚至未知和未来的设备类型。

要充分利用响应式模式,请打开媒体查询栏:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/152444ln1zdiyucda9m162.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以拖动可视窗口上的调节手柄或单击菜单栏中的值、输入具体的值来进行精细度的控制:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/152804olgshalchgyyglyo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).Specific Device(指定设备) - 将可视窗口锁定在特定设备的确切可视窗口大小,并模拟某些设备特征。

当你已经接近开发结束或者希望完善你的网站在特定手机(例如某个iPhone或Nexus)上的显示效果时,可以使用Specific Device Mode(指定设备模式):

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/152933thu2qkn92thfnxhn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

预设设备简介:

在上面已经了解到设备模式中,有大量预设的移动端设备,下面简单介绍一下它们的特性:

(1).设置正确的 "User Agent" (UA) 字符串。

(2).设置设备分辨率和DPI(设备像素比)。

(3).模拟触摸事件(如果适用)。

(4).模拟移动滚动条叠加和元视口。

(5).为没有定义的视口的页面自动调整(提升)文本。

添加自定义设备:

如果已经预设的设备不能满足需求,我们可以添加自定义设备:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/154651k8s85pa128015dp2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然后进入如下界面:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/154752kh9eeavhe41p9p4z.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

配置相关参数即可。

设备状态和方向:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/160136o7c5han0s0t7t9di.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

当模拟特定设备时(在响应式模式下无效),Device Mode(设备模式)工具栏显示一个附加控件,主要用于切换模拟设备的横向和纵向。在所选设备上,控件不仅仅是定向切换。 对于受支持的设备(如Nexus 5X),会看到一个下拉菜单,允许您模拟某些设备状态,例如:

(1).默认浏览器UI。

(2).带Chrome导航栏。

(3).打开键盘。

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/161111s5v8o1a5it2uwtit.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

缩放至合适:

有时需要测试分辨率大于浏览器窗口中实际可用空间的设备。

在这些情况下,缩放至合适选项就派上用场:

(1).Fit to Window (适合至窗口) - 自动将缩放级别设置为最大可用空间。

(2).Explicit percentages(显式百分比) - 如果您想要测试图像上的DPI,显式百分比是有用的。

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/161944q4968ggo1ozgubnb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可选的控件(如触摸、媒体查询,DPR):

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/162438u9ghtuh22ttkgyyf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过点击右侧三个点弹出一个菜单,可以进行更多的设置:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/165211r6t5tvilzb5s5lzs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面介绍几个常用功能:

(1).媒体查询:

媒体查询是响应式网页设计的一个重要组成部分。要查看媒体查询检查器,在三点菜单中点击Show Media queries(显示媒体查询)。 DevTools 会检测样式表中的媒体查询,并在顶部标尺中将其显示为彩色条。a:3:{s:3:\"pic\";s:43:\"portal/201708/12/163957ouq8fhs4tmufipdh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

媒体查询的颜色编码如下:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/164045j8ryorft8wcg58l3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

右键单击某一栏可以查看CSS中定义该媒体查询的位置并跳转到源代码中的定义:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/164201bkyxjd1dod5oj0z5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).显示标尺:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/164240z1k4apbqzp4ax4pj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(3).设备像素比(DPR):

如果您想在非Retina屏的机器上模拟Retina屏设备,或反过来,只需要调整Device pixel ratio(设备像素比)就可以了。Device pixel ratio(设备像素比)(DPR)是逻辑像素和物理像素之间的比率。具有Retina屏的设备,例如Nexus 6P,比常规设备具有更高的像素密度,它可以影响内容的视觉清晰度和视觉大小。

有一些关于Device pixel ratio(设备像素比)(DPR)的例子:

(1).CSS媒体查询,比如:@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  }

(2).CSS image-set 规则。

(3).图片上的srcset属性。

(4).window.devicePixelRatio 属性。

如果有一个原生Retina显示,低 "Dots Per Inch" (DPI) 的资源看起来像素化,而较高DPI的资源是清晰的。为了在标准显示器上模拟这种效果,将DPR设置为2并通过比例缩放视口。2x的资源看起来依然清晰,而1x将看起来像素化。

(4).配置网络(UA,网络调节):

选择此选项将允许你更改网络相关行为:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/164853dxx03hhh8rz9qrxf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以进行一些网络限制方面的设置。

(5).Device Type(设备类型):

Device Type(设备类型)设置可以允许你更改设备的类型:

a:3:{s:3:\"pic\";s:43:\"portal/201708/12/165348x1tmu8glt9z99tkt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

更改此设置将影响移动视口和触摸事件模拟,并更改UA字符串。因此,如果想为网站创建响应式的PC网站,并想要测试悬停效果,应该从Responsive Mode(响应式模式)切换到“Desktop”。

特别说明:模拟毕竟是模拟,有诸多不足之处:

(1).GPU和CPU的行为无法模拟。

(2).浏览器的用户界面(UI)

(3).系统显示,比如地址栏,不会被模拟。

(4).本地显示器,如 <select> 元素,不会模拟为一个模态列表。

(5).一些增强功能,如打开数字输入键盘,可能与实际设备的行为有所不同。

(6).WebGL可以在模拟器中实现,但iOS 7设备不支持。

(7).Chrome不支持MathML,但iOS 7设备支持。

(8).模拟器不会覆盖AppCache 的 清单文件 或 查看源代码请求 的UA。

上面是常见的一些无法模拟的功能,当然可能还有更多。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-23 21:35 , Processed in 0.067820 second(s), 20 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部