首先先展示一下各个网站的有关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 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- Citrix运行检测出错
Citrix运行检测出错: 出现意外错误.请确认服务器名称正确.服务器已打开.Citrix XenApp 已安装在服务器上并且 Citrix MFCOM 服务正在运行. 看Windows日志出现如下错 ...
- 微博地址url(id)与mid的相互转换 Java版
原理: 新浪微博的URL都是如:http://weibo.com/2480531040/z8ElgBLeQ这样三部分. 第一部分(绿色部分)为新浪微博的域名,第二部分(红色部分)为博主Uid,第三部分 ...
- django的中间件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2EAAAGUCAIAAAAzrr3rAAAgAElEQVR4nOy9d5wcx3kmzAXl80m6zy
- Hibernate 多对多关联查询条件使用
from Brand as b inner join fetch b.styles as s where s.styleId=?
- SSM 集成的两个配置文件
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"> < ...
- 【GoLang】golang context channel 详解
代码示例: package main import ( "fmt" "time" "golang.org/x/net/context" ) ...
- FASTREPORT 整理 (mtm)
DELPHI中用FASTREPORT制作报表 1.加载并存储报表 默认情况下,报表窗体同项目窗体构存储在同一个DFM文件中.多数情况下,无须再操作,因而你就不必采用特殊方法加载报表. 如果你决定在文 ...
- 4. javacript高级程序设计-变量、作用域和内存问题
1.1 基本类型和引用类型的值 变量包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,引用类型值可以由多个值构成的对象 1.1.1 动态的属性 针对引用对象的值,可以为其 ...
- 去掉mysql数据库字段中的个别字符
update 表名 set 列名 = REPLACE (mcategory,"要去掉的字符","") where 列名 like "%要去掉的字符% ...
- Mathematics:Find a multiple(POJ 2356)
找组合 题目大意:给你N个自然数,请你求出若干个数的组合的和为N的整数倍的数 经典鸽巢原理题目,鸽巢原理的意思是,有N个物品,放在N-1个集合中,则一定存在一个集合有2个元素或以上. 这一题是说有找出 ...
