首先先展示一下各个网站的有关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）。
这个主要是针对移动网站添加到快捷方式（添加到主屏幕）
- 淘宝上倒卖新浪微盘事件来龙去脉——谈谈巧用IMEI
这是一个老黄历的事件,曾记得淘宝上的卖家卖10元卖50g网络硬盘,并且卖的相当的火,一个月就卖了500个账号.由于我也是那个事件的亲身经历者之一,这里就看到了IMEI号在项目中防止作弊是何其的重要. ...
- nginx简介（轻量级开源高并发web服务器：大陆使用者百度、京东、新浪、网易、腾讯、淘宝等）（并发量5w）（一般网站apache够用了，而且稳定）
nginx简介(轻量级开源高并发web服务器:大陆使用者百度.京东.新浪.网易.腾讯.淘宝等)(并发量5w)(一般网站apache够用了,而且稳定) 一.总结 1.在连接高并发的情况下,Nginx是A ...
- 从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能
前言 之前在 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记 这篇随笔中介绍了一下 UWP 淘宝的“比较”新功能呱呱坠地的过程.在鲜活的文字背后,其实都是程序员不眠不休的血泪史(有血有泪有史) ...
- 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)
移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...
- 方便代理下单的EcStore收货地址一键分析插件，同时支持淘宝/京东/一号店
使用EcStore开展分销的网站,代理需要经常代客下单,每个客户收货地址都不同,要选择和填写多个内容才能完成地址输入:省.市.区.详细地址.收货人姓名.手机电话等,非常麻烦,也容易输入错误.安装EcS ...
- 从淘宝和网易的font-size思考移动端怎样使用rem？
最近翻了一下关于移动端的rem的使用,怎样最方便.在读到流云诸葛的一篇关于<从网易与淘宝的font-size思考前端设计稿与工作流>的文章后,来总结一下. 然而根据我以往做移动端web项目 ...
- 淘宝、网易移动端 px 转换 rem 原理，Vue-cli 实现 px 转换 rem
在过去的一段时间里面一直在使用Vue配合 lib-flexible和px2rem-loader配合做移动端的网页适配.秉着求知的思想,今天决定对他的原理进行分析.目前网上比较主流使用的就是淘宝方 ...
- 仿淘宝,京东红包雨(基于Phaser框架)
本红包雨项目是基于HTML5的游戏框架Phaser写的,最终形成的是一个canvas,所以性能很好,但是必须要说的是这个框架比较大,压缩后也有700K左右,所以请慎用. 代码地址: https://g ...
- js原生淘宝京东宝贝放大镜效果
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- caffe学习系列（2）：训练和测试自己的图片
参考:http://www.cnblogs.com/denny402/p/5083300.html 上述主要介绍的是从自己的原始图片转为lmdb数据,再到训练.测试的整个流程(另外可参考薛开宇的笔记) ...
- Apache 无法启动
本人是做前端开发的,对后台程序不太熟悉,也就以前学过一点.net.但现在都忘记的差不多了.最近在公司,经理给了我一个管理工具dedecms,我刚开始看的时候完全不懂这是什么东西,之前都没听说过(本人见 ...
- BZOJ 2822: [AHOI2012]树屋阶梯
Description 求拼成阶梯状的方案数. Sol 高精度+Catalan数. 我们可以把最后一行无线延伸,所有就很容易看出Catalan数了. \(f_n=f_0f_{n-1}+f_1f_{n- ...
- ndk学习10: linux文件系统
画了一天的思维导图,好累啊 一.概述 二.文件IO 三.缓冲区输入输出 四.高级IO 五.文件和目录 来自为知笔记(Wiz)
- c++写入txt文件
简单方式: #include "stdafx.h" #include <iostream> #include <iomanip> #include < ...
- Post方法调用公司发Mail的接口
调用公司发Mail的接口. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- Game of Life I & II
According to the Wikipedia's article: "The Game of Life, also known simply as Life, is a cellul ...
- Semantic-UI-React （称 stardust） 对比 Antd
Semantic-UI-React: http://react.semantic-ui.com/ ANTD :http://ant.design/ Amaze UI React: http://ama ...
- C# 静态函数调用窗体控件
回调函数方法是静态函数,需要调用窗体控件,赋值或取值. 定义 public static Form1 mainFrm; mainFrm = this; public partial class F ...
- 7. javacript高级程序设计- 函数表达式
1. 函数表达式 1.1 函数定义 函数定义的方式有两种:一种是函数声明,另一种就是函数表达式. (1). 函数声明:函数声明的重要特征就是函数声明提示,函数声明会在函数执行前执行 function ...
