有没有办法让Chrome Dev Tools模拟移动设备宽屏幕宽度网站的默认缩小视图?

时间:2014-06-14 23:53:35

标签: google-chrome media-queries google-chrome-devtools mobile-devices

我尝试使用Chrome的开发工具模拟众多移动设备上的网页标准呈现。但是,当尝试模拟屏幕分辨率小于我尝试渲染的页面宽度的设备时,我只看到如果我只是缩小桌面浏览器的大小会有效发生的情况。通过拖动其边缘的窗口。

我知道这很有用,但我想要测试的体验是当移动设备显示网站的缩小视图以适应屏幕时页面的外观(这通常是什么当网页未配置视口元标记和/或CSS媒体查询时,您会在移动设备上看到)。

有没有办法使用Chrome的Dev Tools实现此默认缩放行为的模拟?

1 个答案:

答案 0 :(得分:1)

如果您的意思是使用没有视口的非响应式网站'要重新调整到设备的默认视口以了解重新缩放的外观,您可以或多或少地在视觉上再现它,是的。

点击'屏幕'做自定义模拟。并手动输入目标像素显示widthheight尺寸为'分辨率'。对iPhone目标说320 x 480

然后输入'设备像素比率'那是:1 / your-fixed-width * device-width 例如对于1024px至320px iPhone分辨率目标宽度的固定宽度设计,0.3125%。

它会相应地将您的固定布局放在包含的视口中,您可以通过更改浏览器窗口大小或上下移动Chrome检查器栏来手动重新缩放。

字体不会像真实设备那样清晰明了,但应该能为您提供准确的视觉布局。