时间:2021-07-01 10:21:17 帮助过:48人阅读
废话说了一推,说回重点:首先,移动web开发咱需要一个调试工具。
1.Google emulation:谷歌的移动端模拟器,简单的理解为pc模拟手机的屏幕大小和浏览器特性的一个东东。
打开方式:打开chrome浏览器,然后F12键打开,开发者工具,点击小手机的图标,如下图
打开的效果和各部分的功能作用:
首先我们在device里可以选择需要模拟的设备,这个很重要,决定我们写的页面可以适配什么样的手机
打开device下拉菜单看到可以模拟的设备:可以看到主流的手机这里基本都有了O(∩_∩)O
有了emulation我们可以很方便的做开发了。
2.veiwport: 什么是veiwport?
官方解释:手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
简单的理解为,移动终端的可视区。
关于veiwport的有关设置:
常见的例子: