Эксклюзивный CSS для iPhone / Android

Question

Я делаю мобильную таблицу стилей для моей страницы.Есть ли простой способ заставить его показывать эту таблицу стилей пользователям iPhone / Android?Или я должен вытащить пользовательские агенты и выяснить это таким образом - и как мне это сделать?

Кроме того - есть ли какие-либо инструменты, чтобы сделать этот вид веб-разработки проще?

Answer 1

Вы можете сделать что-то подобное, если ваша таблица стилей одинакова для iOS / Android.

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

Но если вы пытаетесь определить, является ли это iOS или Android, вам нужно будет выполнить обнаружение.

С точки зрения создания мобильного телефонаПроще, есть куча вещей:

• http://www.phonegap.com/
• http://www.sencha.com/products/touch/
• http://www.appcelerator.com/
• http://www.jquerymobile.com/
• http://www.jqtouch.com/

Есть несколько, чтобы вы начали:)

Надеюсь, это поможет.

Answer 2

Попробуйте, используя navigator.userAgent в JavaScript;) (любезно предоставлено этим удивительным сообщением 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");
}

Answer 3

Пожалуйста, проверьте этот пост http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-android/

Answer 4

определить, что именно использует пользователь, и стиль для его мобильного устройства

iphone 4

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

traget Target Samsung Galaxy S2

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

Подробнее об этом (или других устройствах) вы можете найти здесь: Таргетинг на конкретное устройство