移动端 代码块

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%);