首页 > 经验心得 > 自适应网页content="pc,mobile"和content="width=device-width有什么区别?
2019
02-04

自适应网页content="pc,mobile"和content="width=device-width有什么区别?

自适应网页content="pc,mobile"和content="width=device-width有什么区别?

如果网页是自适应网页那么头部代码到底是添加

<meta name="applicable-device"content="pc,mobile">

还是

<meta name="viewport" content="width=device-width,initial-scale=1">

这两段代码到时有什么区别呢?

如果网页采用了响应式网页设计,例如(cdc.tencent.com) 不需要经过url自适配跳转就可以根据浏览器的屏幕大小自适应的展现合适的效果,同时适合在移动设备和电脑上进行浏览,在html中加入如下meta:

<meta name="applicable-device"content="pc,mobile">

这段代码的意思就是此网页是同时支持PC和手机端的网页,也就是自适应网页,所以加上这段代码是为了给搜索引擎看的。自适应本来就是通过CSS文件隐藏了部分 html 代码展现出来。

如果你的网页是自适应但是还是被百度给强制转码了,可以试试在站长平台,站点属性里面选择为自适应试试。

<meta name="viewport" content="width=device-width,initial-scale=1">里面的width=device-width到底是什么意思呢?

这涉及到了移动设备(ios, android)的屏幕尺寸问题,device-width指的是设备的物理宽度,width是页面宽度,这么做是为了兼容更多的设备,当然只通过viewport标签还是不够的,还需要配合Media Query进行响应式设计。

在网页的<head>中增加这句话,可以让网页的宽度自动适应手机屏幕的宽度。 其中: width=device-width :表示宽度是设备屏幕的宽度 initial-scale=1.0:表示初始的缩放比例 minimum-scale=0.5:表示最小的缩放比例 maximum-scale=2.0:表示最大的缩放比例 user-scalable=yes:表示用户是否可以调整缩放比例

加width=device-width,字体大小才会适合阅读。你用手机访问一些网站的时候,看到的页面和电脑上一样,字体非常小,需要缩放才能看清,这种就是没加width=device-width的。

什么是自适应网页

自适应是把一些不显示的内容通过CSS隐藏了,,比如没显示的图片,侧栏等,但这部分内容在HTML代码中还是存在的,这样就会在移动端造成带宽的浪费,但是加载的内容没变,由于移动站点对访问速度的高要求,算是变相的提高了对服务器的要求。

没有移动URL对应的站点,PC和移动共用一个URL 不管html变不变 都可以添加content="pc,mobile"

总结

<meta name="applicable-device"content="pc,mobile">是给搜索引擎看的

<meta name="viewport" content="width=device-width,initial-scale=1">是给浏览器看的,推荐都添加上比较好。