现在的位置: 首页 > 移动开发 > 正文

移动web开发基础知识

2020年01月02日 移动开发 ⁄ 共 1033字 ⁄ 字号 评论关闭

  首先做开发码子编完了我们得有个工具去看效果,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开发基础知识的全部内容,更多内容请关注学步园。

抱歉!评论已关闭.