比较各大挪动门户网站淘宝、京东、网易、新浪、腾讯meta标签的异同

最新推荐文章于 2024-03-30 21:24:57 发布

huzhigenlaohu

最新推荐文章于 2024-03-30 21:24:57 发布

阅读量1.1k

点赞数

分类专栏： html 文章标签：移动平台移动互联网布局 meta

本文链接：https://blog.csdn.net/huzhigenlaohu/article/details/42238025

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

比较各大移动门户网站淘宝、京东、网易、新浪、腾讯meta标签的异同
针对HTML5在移动端的迅猛发展，各大门户网站开始使用HTML5的标签来针对手机网站进行重构，所以我找到了一些国内有代表性的网站例如淘宝、京东、以及四大门户来比对一下他们在移动网站的meta标签的异同。如果大家想看一下在手机端网站代码的话可以通过远程调试工具来进行查看，具体操作方法：、首先先展示一下各个网站的有关meta标签的代码：

网易

新浪

腾讯

搜狐

淘宝

京东

　　<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"$amp;>amp;$lt;meta name="apple-mobile-web-app-capable" content="yes">

　　<meta name="format-detection" content="telephone=no"> 以上是在安卓系统上获取的移动网站上代码

　　现在针对移动平台的网站大多采用响应式布局

　　所谓响应式布局：

　　响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

　　响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

　　优点：

　　面对不同分辨率设备灵活性强

　　能够快捷解决多设备显示适应问题

　　缺点：

　　兼容各种设备工作量大，效率低下

　　代码累赘，会出现隐藏无用的元素，加载时间加长

　　其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

　　一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

现在先切回正题：

　　以上网站的相同点：

　　meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是cont ent里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用

　　所以一个简单的移动网站的meta设置可以是这样：

　　<!DOCTYPE html>

　　<html>

　　<head>

　　</head>

　　<body>

　　<h1>移动网站的meta设置</h1>

　　</body>

　　</html>

　　不同点：

　　meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

　　用户将网页收藏为书并加入到主画面时，可以令最下的选单消失，令网页为全屏幕

iphone的私有标签，它指定的iphone中safari顶端的状态条的样式

　　默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
这个主要是针对移动网站添加到快捷方式（添加到主屏幕）