chrome模拟移动端

1、开发移动端，尤其是一些大屏项目的时候，很容易就用Responsive然后直接在后面设置一些值，来模拟，但是在一些情况下，直接这样设置，会出现匹配比较乱。页面比你实际设计的值大了或者小了。

2、避免上述情况，正确的设置方式。（直接添加一个你设置相应尺寸的设备）

都知道Chrome浏览器可以模拟真机尺寸，进行调试开发很方便，
但是如果你的真机在预制的配置参数中没有，而且又不知道该输入什么尺寸参数，该怎么办？

首先如果不知道自己手头的设备的可视屏幕尺寸是多少，那么就在代码里写下以下这些代码

            const screenWidth = document.body.clientWidthconst screenHeight = document.body.clientHeightalert(`当前设备的屏幕尺寸（宽 x 高）：${screenWidth} x ${screenHeight}`)

然后把得到的参数添加到Chrome浏览器的模拟真机参数中
最后我们除了可以在Chrome调试开发画面，最关键的是可以根据此参数，配合css3中的 @media 编写针对不同尺寸的移动设备的样式了

OK啦，这样一来就能在浏览器中调试开发了，不需要每次都到真机上运行查看效果了，非常方便，调试下来的最终画面效果一定与真机上的是一样的，注意这里我只说了画面，对于功能，还是要到真机上调试的噢！
（对了，这还有个好处，如果只是写画面，那么只需要去网上找这个参数，如果找得到，那就不需要买真机了，前提你的应用对功能要求不高，只重视画面，否则还是最好买个真机来调试功能，不然会有你意想不到的功能bug等着你）

chrome模拟移动端相关推荐

使用Java模拟Web端的POST或GET请求，实现自动化操作：加密狗烧制技术详解
简介硬件锁(加密狗)加密软件.与金雅特公司合作的方式是:买家公司开发一个授权程序(这里公司的授权程序:Encrypt类的encrypt()方法),进行授权管理用户锁. 注意:LZ只演示模拟Web端的 ...
Python - Selenium Chrome 模拟手机
Python - Selenium Chrome 模拟手机 Max.Bai 2017-04 Chrome浏览器支持移动端调试,当然ChromeDriver也支持移动端测试了. 使用python调用We ...
jmeter web服务器协议,【JMeter4.0学习（三）】之SoapUI创建WebService接口模拟服务端以及JMeter测试SOAP协议性能测试脚本开发(示例代码)...
目录: [阐述]:首先应该遇到了一个共同的问题,JMeter3.2之后就没有WebService(SOAP) Request,后来经过查询网上资料得知其实可以用HTTP请求来操作,结果是一样的. [步 ...
chrome模拟手机浏览器方法
chrome模拟手机浏览器方法安卓 chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus On ...
SoapUI模拟服务端进行接口测试
在进行接口测试中,SoapUI是很好的第三方工具,可模拟http.webservice等多种协议请求进行测试,SoapUI模拟请求方发送http.webservice的request请求参见我之前的博 ...
【Python养成】：案例（设计三维向量类、实现向量的加法、减法以及向量与标量的乘法和除法运算、编写自定义类，模拟内置集、编写自定义类，模拟双端队列。）
学习内容:设计三维向量类.实现向量的加法.减法以及向量与标量的乘法和除法运算设计三维向量类.实现向量的加法.减法以及向量与标量的乘法和除法运算实验代码: class Vector_3D:def _ ...
在线接口测试模拟移动端请求API接口
我们做开发一般都是在PC端,然而我们很多时候需要模拟移动端进行接口请求. 比如,当一个API需要根据用户不同的终端来返回不同的数据时,就需要一个工具来模拟不同的终端了. 利用接口测试工具ApiPost ...
利用在线HTTP接口测试工具ApiPost，模拟移动端请求API接口
我们做开发一般都是在PC端,然而我们很多时候需要模拟移动端进行接口请求. 比如,当一个API需要根据用户不同的终端来返回不同的数据时,就需要一个工具来模拟不同的终端了. 利用接口测试工具ApiPost ...
Chrome DevTools移动端调试
Chrome DevTools移动端调试本文介绍如何使用Chrome开发者工具来进行安卓移动端web页面调试,主要内容引自移动端Web开发调试之Chrome远程调试(Remote Debugging ...

chrome模拟移动端

chrome模拟移动端相关推荐

最新文章

热门文章