如何模拟测试不同分辨率设备网页
利用Chrome的开发者工具进行网页分辨率兼容性调试
·
多数浏览器都支持按住ctrl键,然后滑动鼠标滚轮进行页面的缩放,这里例举网页开发中常用的两款浏览器Chrome和Firefox
在浏览器中调节网页分辨率
1.chrome
测试不同分辨率下网页的兼容性
1
利用Chrome的开发者工具进行网页分辨率兼容性调试,F12进入开发者模式,看图说话



2
利用Firefox的开发者工具进行网页分辨率兼容性调试,F12进入开发者模式,看图说话
3
用testsize.com调试在线网站不同分辨率下的效果
注意只能调试上线的网页
网址http://testsize.com/

4.chrome的插件Resolution Test

缩放排列布局的原因
这与你电脑分辨率及浏览器无关,有些网页可以自适应设备,也就是不管什么分辨率的设备都可以满屏展示,而且样式和布局会随着设备分辨率的大小变化而变化,这是因为其用到了响应式技术,关键点即不用绝对大小,取而代之的是相对大小,比如style=“width:100%;height:100%”
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐




所有评论(0)