如何在chrome浏览器上调试特定机型的屏幕效果

需求：有个项目只适配了手机，屏幕宽度大于手机尺寸是俩侧有灰色背景，现在要适配小米note4平板，如何精确适配？

步骤：

1.打开chrome

F12，点击设备切换按钮，点击上方的手机型号选择，点击下拉列表最下边的eDit

2.出现如下图界面

增加机型，填写数据

3.数据如何计算？

1）比如小米note4平板，到小米官方商城查询可得下图。

2)计算device pixel ratio（设备像素比）

devicePixelRatio ，它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素

例如iPhone4S，分辨率为：960×640，取屏幕宽度计算，物理像素640px，设备独立像素320px，那么，devicePixelRatio 值为 640px / 320px = 2，又如iPhone3，计算出来的 devicePixelRatio 值为 320px / 320px = 1

我们也可以这样理解，由于160ppi是一个标准像素，那么283ppi约为1.77，即设备像素比约为1.77.

这里还有几个数据，可供参考:

ipone5s,1136*640像素分辨率，326ppi:设备像素比= 326/160 约等于 2.03

ipone6,1334*750像素分辨率，326ppi:设备像素比= 326/160 约等于 2.03

ipone5 Plus，1920*1080像素分辨率，401ppi：:设备像素比= 326/160 约等于 2.51

这就是设备像素比一般是1,1.5,2,2.5,3的由来。。。

3)根据以上结论我们可以得出，小米note 4 平板的设备像素比约为1.77

手机分辨率的width、height，分别为1920/1.77=1085 和 1200/1.77=678

4)输入user agent string，简单的方法是打开手机某浏览器，在地址栏输入javascript:alert(navigator.userAgent)，弹出user agent string，再手敲到模拟器user agent string 输入框中，也可以不写，毕竟我们只是为了屏幕适配；

最终结果如下:

如何在chrome浏览器上调试特定机型的屏幕效果相关推荐

在Chrome浏览器上调试特定机型的屏幕效果
前言我们现在开发网页基本上都是会开发成"响应式"的,而为了减少麻烦我们经常会在PC端直接进行测试手机端效果.(注,虽然前期会在PC端测试手机端样式,但是后期还是会在真机上进行测试 ...
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容. 虽然现在的桌面浏览器提供了模拟手 ...
Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
如何在Chrome浏览器下清除DNS缓存
如何在Chrome浏览器下清除DNS缓存本文翻译自:How to Clear/Flush DNS Cache in Google Chrome? 很多时候,当我购买新的域名,并更改域名服务器并将其托 ...
Chrome 浏览器客户端调试
Chrome 浏览器客户端调试在开发者界面中,你可以使用打开快捷输入Ctrl + Shift +P运行常用命令. 一.Elements 1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息, ...
[Selenium] 如何在老版本的Chrome 浏览器上使用selenium
由于Chrome Driver 只兼容Chrome 浏览器12.0.712.0 和之后的新版本,会因此如果要在老版本的Chrome 浏览器上使用Selenium, 则只能使用 SeleniumRC ...
Chrome浏览器上集成IE内核方案
Chrome浏览器上集成IE内核方案 1. 架构图双核功能的基本思路是,在chrome原有的render 管理的基础上,添加trident内核对象并在切换时将两个渲染的内核数据进行同步,进而将内核网 ...
Chrome浏览器开发调试系列(一)
// 计划写一个 Chrome 浏览器以及调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...
在Chrome 浏览器上滚动截屏
浏览器原生功能实现滚动截屏,截取整个页面;|;插件推荐「Nimbus Screenshot」在Chrome 浏览器上滚动截屏,不需要插件和任何 app,利用 chrome 浏览器原生功能即可实现. ...

如何在chrome浏览器上调试特定机型的屏幕效果

如何在chrome浏览器上调试特定机型的屏幕效果相关推荐

最新文章

热门文章