Détection d'un mobile lorsque la résolution est trop élevée

J'essaie de rendre ma page Web réactive. Je suis au courant des questions des médias, cependant, lorsque vous utilisez un appareil comme Samsung Galaxy Note 4 qui a une très haute résolution, la page web finit par ressembler beaucoup à la version de bureau.Détection d'un mobile lorsque la résolution est trop élevée

Je sais qu'il y a un moyen de le faire comme quand j'ai essayé de visiter un site Web sensible connu comme Alibaba, il m'a redirigé vers la version m.alibaba de celui-ci. Quel est le qualificatif ici? Parce que évidemment ce n'est pas la résolution.

Merci d'avoir pris le temps.

Source

2017-10-12 George Avgoustis

Voulez-vous rediriger vers une version mobile du site ou utiliser des requêtes média? – kawnah

ils ont ceci dans leur section principale – mlegg

Vous pouvez vérifier le taux de pixel réel avec -webkit-min-device-pixel-ratio dans les requêtes média. Par exemple, le Galaxy S4 et les suivants a un -webkit-device-pixel-ratio de 4, tandis que le S3 a seulement un ratio de 3. Le ciblage basé sur ceci vous permettra de présenter différentes vues mobiles par appareil.

Voici un exemple qui ne cible un S3:

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

Vous pouvez trouver une liste complète des appareils et de leurs médias pertinents des requêtes sur this CSS Tricks page.

Rappelez-vous d'inclure une META tag dans votre section <head> qui permet de mise à l'échelle:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

La réelle redirection dont vous parlez ne peut pas être géré via CSS, et est généralement géré via JavaScript.

Cela peut être (crûment) fait simplement un chèque contre window.screen.width:

if (window.screen.width < 1000) { 
    window.location = 'm.mysite.com'; 
}

Bien qu'il soit beaucoup plus sûr de vérifier contre l'agent utilisateur:

var isMobile = function() { 
    console.log("Navigator: " + navigator.userAgent); 
    return /(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent); 
};

Hope this helps! :)

Source

2017-10-12 20:39:53

merci beaucoup. ouais je savais comment rediriger mais pas ce que le qualificatif était pour le faire. Je suppose que c'est une question de réglage fin. C'est un peu étrange cependant comment le qualificatif pour mobile dans JS est l'agent utilisateur mais dans css tout sur le rapport et la résolution. Cela semble un peu incohérent. Existe-t-il un moyen de vérifier l'agent utilisateur sur les requêtes multimédias dans css? Merci beaucoup! –

Pour autant que je sache, les requêtes média ne peuvent pas vérifier spécifiquement auprès des agents utilisateurs. Cependant, étant donné que tous les appareils mobiles supportent JavaScript et l'ont activé par défaut, je pense que c'est un pari assez sûr pour gérer la redirection à travers lui. N'oubliez pas que vous pouvez également vérifier le [** navigateur **] spécifique (https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) que l'appareil mobile utilise en cas de besoin! Bien que vous puissiez cibler n'importe quel périphérique en CSS brut, vous ne devriez pas vraiment avoir besoin d'une redirection en premier lieu :) –

Vous pouvez également créer une page de style distincte et l'utiliser.

<link rel="stylesheet" media="screen and (min-device-width: Device Width)" href="css.css">

Source

2017-10-12 22:11:29

Détection d'un mobile lorsque la résolution est trop élevée

Répondre

Questions connexes