一直走在全网营销路上。。。

网站移动端开发:如何开发网页,如何让网页自

08-15 SEO

在手机端用户变成流量大头的时候,网站的移动端变的重要了起来。那么,很多时候我们开发的页面需要自适应移动端和手机端,那么如何实现呢?

 

先看一个简单的网页代码

<html> 
<head>
<meta charset="utf-8"/> 
</head> 
<body> 
hello 我不是自适应网页 
</body> 
</html>

在PC电脑端的实现效果如图

hello 我不是自适应网页 

在移动端的实现效果如图

hello 我不是自适应网页
很明显,当在移动端上显示时,它仍然是按照,pc端模式显示的。
所以字体非常小,都快看不清了,需要放大才行。
好了现在我们来开始正式实现让网页自适应,不管在pc电脑端还是移动端都能正常的显示。
其实很简单,我们只需要在网页的在加一个meta标签即可,如下
<meta name="viewport" content="width=device-width,initial-scale=1.0">
这个meta标签的nameviewportcontent为许多属性集合,用逗号分隔。

<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
hello 我不是自适应网页
</body>
</html>

新代码在pc端运行效果如图所示(和没添加name为viewport的meta标签前一样):

但是在手机端运行结果就不一样了,如下图所示:

可以看到,其正常显示了,也就是自动的适应了手机端和pc端。

我们还可以坐下对比下没加这个标签前和加了后的显示效果:

hello 我不是自适应网页

现在是不是很明了了。

现在我们来解析下,我们添加的这个meta标签。

首先,meta标签存储的是一些用户不可见,但是浏览器可见的一些元信息,一般以键值对的方式存储。

比如这个<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>

如下:

width 设置layout viewport  的宽度,为一个正整数,或字符串”width-device”
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

此外,在安卓中还支持  target-densitydpi  这个私有属性,它表示目标设备的密度等级,作用是决定css中的1px代表多少物理像素

target-densitydpi  值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

特别说明的是,当 target-densitydpi=device-dpi 时, css中的1px会等于物理像素中的1px。

因为这个属性只有安卓支持,并且安卓已经决定要废弃target-densitydpi  这个属性了,所以这个属性我们要避免进行使用  。

好了,基本就这样了,有问题可以在评论下面提问,没问题点个赞吧,写文章需要大家的鼓励与支持

版权保护: 本文由樊勇博客原创,转载请保留链接: https://www.fanyongseo.com/seo/63.html

一直走在全网营销路上。。。

联系我们佛系笔记