les requêtes de médias CSS: les appareils mobiles cibles sans spécifier la largeur, le rapport de pixel, etc.

Question

Le mot Let Je veux juste cibler chaque tablette et téléphone, quelle que soit la taille, est-il une requête de médias pour cela? Est-il possible de le faire sans spécifier une taille? Ou utilise une taille la seule façon de cibler les appareils mobiles, et non les ordinateurs de bureau?

Answer 1

Dans le CSS3 spécifications , @media handeld est mentionné, mais il a peut-être pas de support du navigateur.

, non.

Cependant, vous pouvez trouver ce site utile, explique une autre requête de médias techniques pour mobile.

Answer 2

J'ai été aux prises avec cela pendant quelques jours, mais un bon moyen de vérifier les appareils de poche est le dispositif de largeur max. de PC de bureau n'envoient pas au navigateur, mais la plupart des ordinateurs de poche (sinon tous) ne l'utiliser.

Dans mon cas, je voulais montrer une version compressée du site sur tous les appareils (y compris le bureau) lorsque ci-dessous une certaine largeur, pour laquelle je

@media all and (max-width: 640px)

Mais une certaine superposition pop-up qui position: fixed utilisé devait être changé sur les ordinateurs de poche uniquement (parce que la propriété fonctionne dans tous les css navigateurs de bureau, mais pas sur tous les ordinateurs de poche). Donc, pour que je une règle supplémentaire:

@media all and (max-device-width: 640px)

Dans lequel je cible tous les ordinateurs de poche ci-dessous 640 mais pas les navigateurs de bureau. Soit dit en passant, cela ne cible pas aussi iPads (ce qui est la façon dont je le voulais), car il a une largeur de périphérique supérieure à 640px.

Si vous voulez juste cibler tous les appareils simplement choisir une largeur faible min (1px) afin qu'il n'exclut pas tout appareil indépendamment de la largeur.

Answer 3

Je ne pense pas que vous aurez trop de chance avec une approche pure css. Vous aurez envie de faire quelque chose le long des lignes des modernizer.js approche et nous JS pour détecter appareil et ajouter un nom de classe à corps sur cette base.

Quelle est la meilleure façon pour détecter un dispositif mobile dans jQuery?

Ensuite, inclure cette classe dans vos requêtes de médias à cas particulier des appareils mobiles de différentes tailles.