移动端 代码块

1、移动web最佳viewport设置

2、看到某个移动产品 有几个meta标签看不懂 记录下
教程：http://www.cnblogs.com/zhaoran/p/4264744.html
apple-touch-fullscreen 没用
apple-mobile-web-app-capable 有用 必须有，否则就不会进入app模式，也就不会有启动画面。
format-detection safari 会自动识别页面中出现的手机号，点击后会弹出电话呼叫提示，如果不想safari自动识别，可以设置
apple-mobile-web-app-status-bar-style 以app模式启动时才起作用，设置顶部系统栏的样式，content有三个取值：default、black、black-translucent。

3、关于手机端meta知多少 看了一遍
meta
name: 提供名/值对的名称。
常用的有：<meta content="telephone=no" name="format-detection"> 数字不识别为电话号码
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
http-equiv: 指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
常用的有：<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
schema: 翻译 content 属性值的格式 不常用

最佳实践

问题
<meta name="apple-mobile-web-app-capable" content="yes"/> 不知道怎么用
<meta content="black" name="apple-mobile-web-app-status-bar-style"> 不知道怎么用
<meta content="yes" name="apple-touch-fullscreen">
<meta name="apple-itunes-app" content="app-id=425349261">

Js动态设置rem来实现移动端字体的自适应: 比bootstrap更精细，b没有用rem这个单位

var html = document.getElementsByTagName('html')[0];
var w = document.documentElement.clientWidth || document.body.clientWidth; 
html.style.fontSize = w / 750 + "px";

布局方式：
百分比布局，不够灵活；

1.移动端项目:
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
2.移动和 pc 端项目:
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

移动端开发 需要分享的功能
解决办法：分两步走：验证；返回结果

设计稿的宽是基准的2倍；
dpr=2时，使用2倍图；
h5运营页面经常使用js动态计算的方法，而平常的页面（购物，网页）则使用媒体查询的方法；
对于需要精细处理的地方（如通过 CSS 实现的 icon），可以用 px 等绝对单位，然后再通过 transform: scale 方法等比缩放。
transform:translateX(-50%);