我正在尝试使用Chrome的开发工具来模拟大量移动设备上网页的标准渲染。但是，当尝试模拟屏幕分辨率小于我要渲染的页面宽度的设备时，我只会看到如果只是通过拖动桌面浏览器窗口的边缘来减小窗口尺寸，将会有效地发生什么。
我知道这很有用，但我要测试的经验是，当移动设备显示缩小的网站视图以适合屏幕时页面的外观（通常是在没有网页的情况下在移动设备上看到的内容）未配置视口元标记和/或CSS媒体查询）。
有什么方法可以使用Chrome的开发工具来模拟这种默认的缩放行为吗？
如果您打算将非“无视口的响应站点”重新缩放为设备的默认视口，以了解重新缩放的外观，则可以或多或少从视觉上再现它，是的。
单击“屏幕”以进行自定义仿真。并手动输入目标像素显示width和height尺寸作为“分辨率”。对iPhone目标说320x 480。
然后输入“设备像素比率”，1 / your-fixed-width * device-width例如：对于1024px固定宽度设计到320px iPhone分辨率目标宽度的0.3125％。
它将相应地适合固定布局在一个包含的视口中，您可以通过更改浏览器窗口的大小或上下移动Chrome检查器栏来手动进行任意缩放。
字体不会像真正的设备那样清晰明了，但这应该可以为您提供准确的视觉布局。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句