您的位置：首页 > 运维架构 > 网站架构

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

2013-10-08 10:34 633 查看

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

网易

<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">

新浪

<meta content="width=device-width,minimum-scale=1.0" id="vp" name="viewport">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta itemprop="image" content="/images/google_favicon_128.png">
<meta id="mref" name="referrer" content="origin">

腾讯

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="format-detection" content="telephone=no">

搜狐

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="MobileOptimized" content="320">

淘宝

<meta charset="utf-8">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

京东

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

以上是在安卓系统上获取的移动网站上代码

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

所谓响应式布局：

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

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

优点：

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

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

缺点：

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

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

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

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
现在先切回正题：

以上网站的相同点：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport"/>
</head>
<body>
<h1>移动网站的meta设置</h1>
</body>
</html>

不同点：
<meta content="telephone=no" name="format-detection">
meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

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

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

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

这个主要是针对移动网站添加到快捷方式（添加到主屏幕）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航