首先做开发码子编完了我们得有个工具去看效果,PC端开发我们有firefox,chrome等等,那么我们做手机web用什么做调试?手机设备多种多样,不同品牌,不同的屏幕尺寸。当然我们不可能把所有的手机设备都买齐了,然后在开发的时候,在桌子上从左到右依次摆放,在写了一段代码之后,从左到右依次刷新。
首先,移动web开发咱需要一个调试工具。
1.Googleemulation:谷歌的移动端模拟器,简单的理解为pc模拟手机的屏幕大小和浏览器特性的一个东东。
打开方式:打开chrome浏览器,然后F12键打开,开发者工具,点击小手机的图标
首先我们在device里可以选择需要模拟的设备,这个很重要,决定我们写的页面可以适配什么样的手机
有了emulation我们可以很方便的做开发了。
2.veiwport:什么是veiwport?
官方解释:手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的Safari浏览器最新引进了viewport这个metatag,让网页开发者来控制viewport的大小和缩放,其他手机浏览器也基本支持。
简单的理解为,移动终端的可视区。
上边例子的中文解释宽度等于输出设备的宽度,高度等于输出设备的高度用户不准许缩放初始放大比例为1.0(也就是1:1大小),最小缩放1.0,最大放大1.0,总之一句话就是不让用户做缩放的操作。
width[pixel_value|device-width]width直接去设置具体数值大部分的安卓手机不支持的但是IOS支持
user-scalable是否允许缩放(no||yes)
initial-scale初始比例
minimum-scale允许缩放的最小比例
maximum-scale允许缩放的最大比例
target-densitydpi
--dpi_value70–400//每英寸像素点的个数
--device-dpi设备默认像素密度
--high-dpi高像素密度
--medium-dpi中等像素密度
--low-dpi低像素密度
--webkit内核已不准备再支持
结束语:以上就是关于移动web开发基础知识的全部内容,更多内容请关注学步园。