web-dev-qa-db-ja.com

iPhone / Android専用のCSS

私のページ用にモバイル対応のスタイルシートを作成しています。 iPhone/Androidユーザーにそのスタイルシートを表示する簡単な方法はありますか？それとも、ユーザーエージェントを取得してその方法を理解する必要がありますか。その方法を教えてください。

また、この種のWeb開発を容易にするツールはありますか？

iphoneandroidhtmlcssmobile
16
AKor

あなたのスタイルシートがiOS/Androidで同じなら、あなたはこのようなことをすることができます。

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />

ただし、iOS OR Androidであるかどうかを検出しようとしている場合は、検出を行う必要があります。

モバイル開発をより簡単にするという点では、たくさんのものがあります：

始めるにはいくつかあります:)

お役に立てれば。

19
TNC

JavaScriptでnavigator.userAgentを使用してこれを試してください;）（この素晴らしい投稿のおかげです http://css-tricks.com/snippets/javascript/redirect-mobile-devices/ ）：

if ((navigator.userAgent.match(/iPhone/)) || (navigator.userAgent.match(/iPod/))) {
   alert("we've got an iDevice, Scotty");
}

if (navigator.userAgent.match(/Android/)) {
   alert("Droid me baby");
}
4
Kevin Pajak

この投稿を確認してください http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-Android/

2
AlexKorovyansky

ユーザーを正確に使用しているものと、モバイルデバイスのスタイルを検出する

iphone 4

@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
    .inphone4CSS{}
}

ターゲットSamsung Samsung Galaxy S2

@media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5){
    .GalaxyS2_CSS{}
}

それ（または別のデバイス）の詳細については、こちらをご覧ください： 特定のデバイスをターゲットにする

0
Arthur Tsidkilov