モバイルWeb開発の注意点

ブラウザの互換性を考慮する必要はありません
モバイル端末の開発の主な対象はハンドヘルドデバイスで、そのほとんどがIOSとAndroidシステムであり、soは、このようなページを開発する際にIEや他の2 Bブラウザの互換性にこだわる必要はなく、webkitが今回の開発の重点である.
もちろん、異なるバージョンのAndroidにはいくつかの問題があり、また異なるブラウザのバージョンにもいくつかの違いがあり、IOSはこの面でよく表現されています.
だから開発時にChromeを使ってデバッグすればいいのですが、Chromeの開発者ツールもグレーでいいのです.
豊富なページMeta
表示領域の各種属性を制御するには、次の手順に従います.

 
 
 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  
 
 
 
移动端Web开发注意点width                      – viewport的宽度
 
 
height                     – viewport的高度
 
 
initial-scale          – 初始的缩放比例
 
 
minimum-scale  – 允许用户缩放到的最小比例
 
 
maximum-scale – 允许用户缩放到的最大比例
 
 
user-scalable       – 用户是否可以手动缩放
 
 
IOS中Safari允许全屏浏览：
 
 
 
 
<meta content="yes" name="apple-mobile-web-app-capable">
  
 
IOS中Safari顶端状态条样式：
 
 
 
 
<meta content="black" name="apple-mobile-web-app-status-bar-style">
  
 
忽略将数字变为电话号码：
 
 
 
 
<meta content="telephone=no" name="format-detection">
  
 
 
 
<meta content="telephone=no" name="format-detection">
  
  
<meta content="telephone=no" name="format-detection">
  
一般的に、IOSやAndroidシステムでは、ある長さの数字を電話番号としてデフォルトで表示しますが、追加しなくてもデフォルトで電話として表示されるので、so、これをキャンセルする必要があります!
IOSのSafari設定をデスクトップアイコンに保存するには:
これはIOSのSafari特有のmetaで、あるページをデスクトップに保存するときにこの図をデスクトップアイコンとして使用します.so、サイズとiphoneの一致は57*57 pxです.
 
 
 
<link rel="apple-touch-icon" href="custom_icon.png">
  
 
强大的CSS属性box-flex
 
之所以将这块作为大栏目来讲，是因为这个属性非常有用，和之前开发win8 app时的grid非常相似。
 
box-flex的作用是按百分比划分兄弟相同标签的width，也就是当ul里有个两个li时，每个li会自动划分ul的宽度，如果box-flex:1;那么此时，li的width就是50%
 
box-flex第一种用法实例：
 
 
 
<ul>
     <li>11111</li>
     <li>2222222</li>
     <li>333333333</li>
</ul>

ul{display: -webkit-box;}
ul li{-webkit-box-flex: 1;}
  
  
  
結果を表示(Chromeなどのwebkitコアブラウザで表示する必要があります):
  
box-flexの2番目の使用例:
<div class="demo02">
    <input placeholder="        " type="text">
</div>

<style type="text/css">
.demo02{display: -webkit-box;}
.demo02 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border-style: solid;border-width: 1px;border-color: #ddd #ccc #ccc #ddd;}
</style>
  
  
万悪の群主の方から文句を言って、断固としてlow品をしません!