Tarayıcılar için web sayfamı CSS cep telefonu üzerinde çalışan, iPhone ve Android gibi değiştirmek istiyorum. CSS dosyasında böyle bir şey denedim:

@media handheld {
  body {
    color: red;
    }
  }

Ama herhangi bir etkisi, en azından iPhone gibi değil. Nasıl farklı ideal javascript kullanmadan iPhone vb üzerinde çalışmak için benim CSS yazabilirim?

@media queries kullanabilirsiniz:

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

Bu özel sürüm iPhone (ve 480px max-device-width bir ekran ile. başka bir cihaz hedef alacaktır

Apple, iPhone, gerçi bu bellek kadar olamam tam olarak emin onun doğruluğunu, seçti ihmal kullanımı handheld mobile stil, beri, ve diğer iOS cihazlar, yetenekli oluşturma css daha fazla veya daha az bir par ile masaüstü tarayıcılar, üzerinden, Safari. Liste Dışında madde (bağlantı yukarıda) kısa verir ama, nasıl emin değilim diğer cihazlar için, tam olarak, her şeyi çalıştırın.

< / ^ hr . Düzenlenmişyorum için yanıt, @Colen:

Hmm, bu yeni cihazlar çok yüksek çözünürlük (örneğin droid X 854x480) var gibi görünüyor. Bu algılamak için bir yolu var mı? Bu sorgu ile idare ediliyor sanmıyorum.

A List Apart Article: Responsive Web Design Bu notlar başka bu cihazlar herhangi bir erişim, ancak geldiğimden beri kesin olarak söylemek mümkün değil,:

Neyse ki, CSS3 W3C belirtimi bir parçası olarak medya sorgular, medya türleri vaadi üzerine geliştirmek yarattı. Medya bir sorgu bize belirli bir aygıt sınıfı sadece hedef sağlar, ama aslında bizim iş işleme cihazın fiziksel özelliklerini incelemek için. Mobil Y son artış sonrasında, örneğin, medya sorguları iPhone tarafı istemci özel bir stil sunmak için teknik popüler bir levha, Android telefonlar ve Benzerleri oldu.

Ben De Öyle Düşünüyorumtahminonlar, Android cihazlar olmak hedef @media sorguları olmalı, ama belirtildiği gibi, kesin olarak söylemek mümkün değil.

Cihaz çözünürlüklü bir hedef için, bir örnek var:

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

Daha fazla okuma: W3 Candidate Recommendation for media queries.