首先先展示一下各个网站的有关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 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- Linux ffmpeg命令的介绍与使用
ffmpeg使用语法 ffmpeg [[options][`-i' input_file]]... {[options] output_file}... 如果没有输入文件,那么视音频捕捉(只在Linu ...
- 数据流图DFD画法
数据流图(DFD- Data Flow Diagram)让系统分析者弄清楚"做什么"的问题,其重要性就不言而喻了.那么我们怎么画数据流图呢?数据流图与系统流程图又有什么区别呢? 步 ...
- sed使用的并不是完全的正则表达式
经过实验发现,命令sed 's/pattern/replacement/' file中,pattern使用的并不是完全的正则表达式,而如果想使用正则表达式,需要使用sed命令的 -r 选项: sed ...
- 页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理
实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色 ...
- 【System】shell 实现 bat 的pause功能
read -rsp $'Press enter to continue...\n' 参考资料: http://stackoverflow.com/questions/92802/what-is-the ...
- Asp.net MVC中Html.Partial, RenderPartial, Action,RenderAction 区别和用法
Partial 和RenderPartial:这两个的性质都是一样, 只指把一个个View给镶入进来, 只是回传值有点不一样Partial 回传的一个Object (MvcHtmlString), 回 ...
- UNIX进程
UNIX进程控制的博客 http://blog.csdn.net/yang_yulei/article/details/17404021 Linux的概念与体系 http://www.cnb ...
- 查看Android应用包名package和入口activity名称
使用android自动化测试工具启动应用时,需要填写被测程序的包名和启动的Activity,以下有两种查看应用包名package和入口activity名称的方法: 方法一:使用aapt //aa ...
- VIM常用操作总结
VIM常用的模式网上说法不太一样,但是大同小异,这里大致分一下,便于后面总结 1.一般模式 默认打开文件后的模式,这个时候只能移动光标,不能编辑 2.输入模式 一般模式按下i,就可以进入输入模式,输入 ...
- ACM/ICPC 之 DFS求解欧拉回路+打表（POJ1392）
本题可以通过全部n位二进制数作点,而后可按照某点A的末位数与某点B的首位数相等来建立A->B有向边,以此构图,改有向图则是一个有向欧拉回路,以下我利用DFS暴力求解该欧拉回路得到的字典序最小的路 ...
