
			<p>之前为公司商旅频道写移动端的页面时遇到不少问题，今特来个总结，希望能为后来者带来一些帮助。</p>
<h2>不再考虑浏览器兼容性</h2>
<p>移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，so，在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性，webkit是本次开发重点。</p>
<p>当然，不同版本的Android是存在一些问题的，还有就是不同浏览器的版本也存在一些差别，IOS在这方面表现甚好。</p>
<p>所以在开发时我们只需使用Chrome进行调试即可，话说Chrome的开发者工具也是灰常不错的。</p>
<h2>丰富的页面Meta</h2>
<p><strong>控制显示区域各种属性：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;meta</span> <span style="color: #00c;">content</span>=<span style="color: #a11;">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"</span> <span style="color: #00c;">name</span>=<span style="color: #a11;">"viewport"</span><span style="color: #170;">&gt;</span></pre>
<ul>
<li>width ? ? ? ? ? ? ? ? ? ? ?- viewport的宽度</li>
<li>height ? ? ? ? ? ? ? ? ? ? &#8211; viewport的高度</li>
<li>initial-scale ? ? ? ? ?- 初始的缩放比例</li>
<li>minimum-scale ?- 允许用户缩放到的最小比例</li>
<li>maximum-scale &#8211; 允许用户缩放到的最大比例</li>
<li>user-scalable ? ? ? &#8211; 用户是否可以手动缩放</li>
</ul>
<p><strong>IOS中Safari允许全屏浏览：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;meta</span> <span style="color: #00c;">content</span>=<span style="color: #a11;">"yes"</span> <span style="color: #00c;">name</span>=<span style="color: #a11;">"apple-mobile-web-app-capable"</span><span style="color: #170;">&gt;</span></pre>
<p><strong>IOS中Safari顶端状态条样式：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;meta</span> <span style="color: #00c;">content</span>=<span style="color: #a11;">"black"</span> <span style="color: #00c;">name</span>=<span style="color: #a11;">"apple-mobile-web-app-status-bar-style"</span><span style="color: #170;">&gt;</span></pre>
<p><strong>忽略将数字变为电话号码：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;meta</span> <span style="color: #00c;">content</span>=<span style="color: #a11;">"telephone=no"</span> <span style="color: #00c;">name</span>=<span style="color: #a11;">"format-detection"</span><span style="color: #170;">&gt;</span></pre>
<p>一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！</p>
<p><strong>IOS中Safari设置保存到桌面图标：</strong></p>
<p>这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px</p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;link</span> <span style="color: #00c;">rel</span>=<span style="color: #a11;">"apple-touch-icon"</span> <span style="color: #00c;">href</span>=<span style="color: #a11;">"custom_icon.png"</span><span style="color: #170;">&gt;</span></pre>
<h2>强大的CSS属性box-flex</h2>
<p>之所以将这块作为大栏目来讲，是因为这个属性非常有用，和之前开发win8 app时的grid非常相似。</p>
<p>box-flex的作用是按百分比划分兄弟相同标签的width，也就是当ul里有个两个li时，每个li会自动划分ul的宽度，如果box-flex:1;那么此时，li的width就是50%</p>
<p><strong>box-flex用法实例1：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;ul</span><span style="color: #170;">&gt;</span>
     <span style="color: #170;">&lt;li</span><span style="color: #170;">&gt;</span>11111<span style="color: #170;">&lt;/li</span><span style="color: #170;">&gt;</span>
     <span style="color: #170;">&lt;li</span><span style="color: #170;">&gt;</span>2222222<span style="color: #170;">&lt;/li</span><span style="color: #170;">&gt;</span>
     <span style="color: #170;">&lt;li</span><span style="color: #170;">&gt;</span>333333333<span style="color: #170;">&lt;/li</span><span style="color: #170;">&gt;</span>
<span style="color: #170;">&lt;/ul</span><span style="color: #170;">&gt;</span></pre>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">ul</span>{<span style="color: #000;">display</span>: <span style="color: #164;">-webkit-box</span>;}
<span style="color: #170;">ul</span> <span style="color: #170;">li</span>{<span style="color: #000;">-webkit-box-flex</span>: <span style="color: #164;">1</span>;}</pre>
<p>显示结果（需用webkit核浏览器查看，如Chrome，下同）：</p>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=4441" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<p><strong>box-flex用法实例2：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;div</span> <span style="color: #00c;">class</span>=<span style="color: #a11;">"demo02"</span><span style="color: #170;">&gt;</span>
	<span style="color: #170;">&lt;input</span> <span style="color: #00c;">placeholder</span>=<span style="color: #a11;">"百分百宽度输入框"</span> <span style="color: #00c;">type</span>=<span style="color: #a11;">"text"</span><span style="color: #170;">&gt;</span>
<span style="color: #170;">&lt;/div</span><span style="color: #170;">&gt;</span></pre>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;"><span style="color: #170;">&lt;style</span> <span style="color: #170;">type</span>=<span style="color: #a11;">"text/css"</span>&gt;
.<span style="color: #170;">demo02</span>{<span style="color: #000;">display</span>: <span style="color: #164;">-webkit-box</span>;}
.<span style="color: #170;">demo02</span> <span style="color: #170;">input</span>{<span style="color: #000;">-webkit-box-flex</span>: <span style="color: #164;">1</span>;<span style="color: #000;">width</span>: <span style="color: #164;">100%</span>;<span style="color: #000;">padding</span>:<span style="color: #164;">4px</span>;<span style="color: #000;">height</span>:<span style="color: #164;">18px</span>;<span style="color: #000;">line-height</span>:<span style="color: #164;">18px</span>;<span style="color: #000;">border-style</span>: <span style="color: #164;">solid</span>;<span style="color: #000;">border-width</span>: <span style="color: #164;">1px</span>;<span style="color: #000;">border-color</span>: <span style="color: #219;">#ddd</span> <span style="color: #219;">#ccc</span> <span style="color: #219;">#ccc</span> <span style="color: #219;">#ddd</span>;}
<span style="color: #170;">&lt;</span>/<span style="color: #170;">style</span>&gt;</pre>
<p style="text-align:center">
	<a href="http://www.daqianduan.com/example/?pid=4441" target="_blank" class="btn-demo">点此查看实例展示</a>
</p>
<h2>CSS3实用图标搜集</h2>
<p><a href="http://nicolasgallagher.com/pure-css-gui-icons/demo/" target="_blank"><img class="alignnone size-full wp-image-4442" title="gui" src="http://www.daqianduan.com/wp-content/uploads/2012/08/gui.jpg" alt="" width="578" height="865" /></a></p>
<h2>其他技巧</h2>
<p>关闭Input键盘默认首字母大写：autocapitalize=&#8221;off&#8221;</p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/webkit-dep/">移动端Web开发小记</a></p>		