[Résolu] Affichage sur mobile à haute résolution

Bonjour à tous,

J'essaie de mettre en place un Tumblr en responsive design, pour cela j'ai le code suivant dans mon fichier CSS :

//CSS Desktop
@media screen and (max-width: 1000px) {
    CSS Mobile
}

Comme prévu, l'affichage varie selon la largeur de l'écran (1000px). Toutefois, certains appareils mobile ont une résolution si élevée (1280 x 768 par exemple pour les Nokia Lumia) que la version "ordinateur" y est affichée, en mode paysage notamment.

Est-ce qu'il y a une solution pour forcer un affichage mobile sur les smartphones à haute résolution ?
Sinon, dans le pire des cas, peut-on bloquer la rotation en mode paysage sur ces mobiles ?

Merci d'avance,
Modifié par jk75 (06 Mar 2014 - 10:20)

Le media handheld (périphérique mobile/faible bande passante) est supposé répondre à cette problématique, le problème reste à l'heure actuelle son support par les différents navigateurs.

Un article tente de réponde à cette problématique que pose l'adaptative design > http://www.osaxis.fr/blog/passer-au-responsive-web-design/

En effet, le media handheld n'a pas l'air de convenir sur les nouveaux appareils mobiles. Je vais donc rester sur l'affichage desktop et faire en sorte que ça reste lisible.

Merci pour votre aide !

Bonjour jk75,

La problématique que vous décrivez semblerait indiquer que le viewport de votre page n'est pas défini. Avez-vous dans votre header la meta suivante ?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Si vous avez besoin d'informations complémentaires à ce sujet, vous avez ici un excellent article : Comprendre le Viewport dans le Web mobile.

En l'attente de votre feedback, bon code...

A pardon... petit manque d'attention de ma part,

Vous parliez du Nokia Lumia, qui est un Windows Phone, dans ce cas je vous invite à utiliser la méthode suivante de Bootstrap (voir http://getbootstrap.com/getting-started/#support-ie10-width)

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Bon code...

Merci pour votre aide ! En jouant avec le viewport j'ai réussi à obtenir un affichage propre sur tous les devices, je pensais que ça ne s'utilisait que dans les pages "seulement mobile" et que ça casserait l'affichage sur un écran desktop.

Encore merci !