HTML5基础——21、移动端H5特点

最新推荐文章于 2025-11-24 09:30:00 发布

原创最新推荐文章于 2025-11-24 09:30:00 发布 · 563 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html #移动端

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习H5。
之前学习了HTML标签和CSS样式。但之前学习的都是针对PC浏览器。随着智能手机的普及，很多人看网页已经渐渐从pc转移到了移动端了。
在移动端制作网页有一些和PC区别的地方。

一、对于浏览器的支持

在PC端制作网页的时候，要适配很多不同的浏览器内核。比如IE、Chrome、FireFox等等。
在移动端的开发里面，WebKit内核的浏览器是主流。
查一下百度百科可以知道：
WebKit 是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用），Trident（也称MSHTML，IE 使用）和EdgeHTML（也称Chakra，Edge和其他UWP浏览器使用）。
同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。
可以知道，在主流的移动端系统，比如iOS或者Android里面内置的浏览器大都是使用WebKit内核引擎的，于是我们在制作移动端网页的时候，主要考虑的是兼容WebKit内核浏览器。

二、移动端开发调试方式

之前在学习PC版的H5网页制作时候，我们使用Chrome浏览器的调试工具。
在移动端的开发中，我们依然可以使用Chrome浏览器调试工具。
正常的网页在Chrome是这样的：
在这里插入图片描述

按F12，出现调试工具，然后找到显示隐藏设备工具栏的按钮：
在这里插入图片描述

打开工具栏之后，在上面的尺寸这里可以选择设备：
在这里插入图片描述

有好多默认设备可以选择：
在这里插入图片描述

选择完之后，我们就可以通过这个分辨率来模拟手机的显示情况
在这里插入图片描述

有一个值得注意的地方，由于移动端是没有鼠标的，所以鼠标指针会失效，变成了一个原点来模拟手指点击。
和之前一样，可以用选择工具直接选择网页里面的元素，查看它的代码和CSS样式等：
在这里插入图片描述

三、视口

视口(ViewPort)，指显示内容的可视区域，在移动端网页布局上，从概念上可以分为：

1、布局视口(layout viewport)

980px的宽度布局，用于解决早期PC端页面在手机上显示元素看上去很小的问题，需要手动缩放。

2、视觉视口(visual viewport)

用户正在看到的网站区域

3、理想视口(ideal viewport)

为了使网站在移动端有最理想的浏览和阅读宽度而设定。

四、 meta视口标签

如果有办法让在移动端的时候布局视口的宽度和理想视口的宽度一致，那样显示显示的效果将会比较好。
meta视口标签是为了移动端而设计的，该设置只有在移动端生效。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

其中：

1、 name

指定视口的名称

2、 content

用于设置视口大小和缩放比例

(1) width

设置网页的宽度。例子中的width=device-width，设置网页宽度等于设备宽度，也就是理想视口

(2) user-scalable

用于设置用户是否可以手动缩放网页，设置yes/no或者1/0

(3) initial

设置网页初始缩放比例，该值大于0即可

(4) minimum

设置网页最小缩放比例，该值大于0即可

(5) maximum

设置网页最大缩放比例，该值大于0即可

五、物理像素

物理像素指的是屏幕显示的最小颗粒。
注意：
在PC端，一般1px等于1物理像素，但在移动端，1px不一定等于1物理像素。
1个px能显示的物理像素点个数，称为“物理像素比”或者“屏幕像素比”
Retina(视网膜屏幕)就是把更多的物理像素压缩至一块屏幕里面。
通常使用二倍图来适配视网膜屏幕：
准备的图片是实际需要的图片像素的2倍，比如50x50的图片，使用100x100的图片来显示。然后使用背景图缩放background-size:w h来设置大小。