当前位置:Gxlcms > html代码 > 移动web开发基础知识_html/css_WEB-ITnose

移动web开发基础知识_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:48人阅读

  首先做开发码子编完了我们得有个工具去看效果,PC端开发我们有firefox,chrome等等,那么我们做手机web用什么做调试?手机设备多种多样,不同品牌,不同的屏幕尺寸。当然我们不可能把所有的手机设备都买齐了,然后在开发的时候,在桌子上从左到右依次摆放,在写了一段代码之后,从左到右依次刷新,呵呵。如果真有人这么去做,我也不说啥了,我只求跪求土豪咱做朋友吧~嘿嘿。

废话说了一推,说回重点:首先,移动web开发咱需要一个调试工具。

1.Google emulation:谷歌的移动端模拟器,简单的理解为pc模拟手机的屏幕大小和浏览器特性的一个东东。

打开方式:打开chrome浏览器,然后F12键打开,开发者工具,点击小手机的图标,如下图

打开的效果和各部分的功能作用:

首先我们在device里可以选择需要模拟的设备,这个很重要,决定我们写的页面可以适配什么样的手机

打开device下拉菜单看到可以模拟的设备:可以看到主流的手机这里基本都有了O(∩_∩)O

有了emulation我们可以很方便的做开发了。

2.veiwport: 什么是veiwport?

官方解释:手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

简单的理解为,移动终端的可视区。

关于veiwport的有关设置:

常见的例子:

                    

人气教程排行