iPhone向けサイト制作によく使う設定やスタイルシートを教えてください
画像の大きさをiPhoneに最適化
@media screen and (max-device-width: 480px){ img{ max-width:100%; height:auto; } }
電話番号の自動リンク機能をオフ
<meta name="format-detection" content="telephone=no">
自動フォントサイズ調整のオフ
body { -webkit-text-size-adjust:none; }
viewportの設定
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
みんなの回答 5 件
画像の大きさをiPhoneに最適化
@media screen and (max-device-width: 480px){img{
max-width:100%;
height:auto;
}
}
電話番号の自動リンク機能をオフ
<meta name="format-detection" content="telephone=no">自動フォントサイズ調整のオフ
body {-webkit-text-size-adjust:none;
}
viewportの設定
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Safari Web Content Guide: Configuring Web Applications
http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html<link rel="apple-touch-icon" href="touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
関連するトピックス