首先先展示一下各个网站的有关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 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- OpenCV成长之路(8)：直线、轮廓的提取与描述
基于内容的图像分析的重点是提取出图像中具有代表性的特征,而线条.轮廓.块往往是最能体现特征的几个元素,这篇文章就针对于这几个重要的图像特征,研究它们在OpenCV中的用法,以及做一些简单的基础应用. ...
- POJ 3641 快速幂+素数
http://poj.org/problem?id=3641 练手用,结果念题不清,以为是奇偶数WA了一发 #include<iostream> #include<cstdio> ...
- 5.6---交换整数的奇数位和偶数位（CC150）
这道题要利用101010来&. 如下答案: public class Exchange { public int exchangeOddEven(int x) { // write code ...
- centos rpmforge repo
在这里找到合适的rpm包:http://pkgs.repoforge.org/rpmforge-release/ 下载 wget http://pkgs.repoforge.org/rpmforge- ...
- webrtc开源项目音频重采样“不友好接口”的几点总结
WebRTC(Web Real Time Communication)并不是Google原来自己的技术,在2010年,Google以大约6820万美元收购了VoIP软件 开发商Global IP So ...
- c# Dictionary的遍历和排序
c# Dictionary的遍历和排序 c#遍历的两种方式 for和foreach for: 需要指定首位数据.末尾数据.数据长度: for遍历语句中可以改变数据的值: 遍历规则可以自定义,灵活性较高 ...
- chrome调试命令模式
哈哈哈
- poj 2240(floyd)
http://poj.org/problem?id=2240 题意:有些人会利用货币的不用汇率来进行套现,比如1美元换0.5英镑,而1英镑又可以换10法郎,而1法郎又可以换0.21的美元,那么经过货币 ...
- 使用Java中File类批量创建文件和批量修改文件名
批量创建文件 int cont = 1; String s = "E:\\学习资料\\Java笔记-"; while(cont<100){ File f = new File ...
- mysql查询当前正在使用数据库
1.select database(): 2.status: 3.show tables:
