モバイル側css開発テクニックまとめ

1952 ワード

移動端meta小結

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

<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, email=no" />

<!-- iOS               -->
<meta name="apple-mobile-web-app-title" content="TM" >

<!--   360        (webkit) -->
<meta name="renderer" content="webkit">

<!--   IE       -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--         ,            viewport    ,     -->
<meta name="HandheldFriendly" content="true">

<!--          -->
<meta name="MobileOptimized" content="320">

<!-- uc     -->
<meta name="screen-orientation" content="portrait">

<!-- QQ     -->
<meta name="x5-orientation" content="portrait">

<!-- UC     -->
<meta name="full-screen" content="yes">

<!-- QQ     -->
<meta name="x5-fullscreen" content="true">

<!-- UC     -->
<meta name="browsermode" content="application">

<!-- QQ     -->
<meta name="x5-page-mode" content="app">

<!-- windows phone       -->
<meta name="msapplication-tap-highlight" content="no">

<!-- Windows 8      -->
<meta name="msapplication-TileColor" content="#000"/>

<!-- Windows 8      --> 
<meta name="msapplication-TileImage" content="icon.png"/>

iPhoneのsafariブラウザはinput[type=「submit」レンダリング効果ソリューション
input{
    -webkit-appearance: none;
}