web-dev-qa-db-fra.com

Adapter le site Web aux appareils mobiles

J'ai une application web où la mise en page réactive n'est pas une option pour les appareils mobiles, j'ai donc essayé de jouer avec la fenêtre d'affichage un peu à l'échelle mais sans succès.

La taille de la page est de 1280x720, donc sur les petits écrans, elle doit faire un zoom arrière et sur les plus grands zoomer:

var scale = $(window).width() / 1280;

$('head').append('<meta name="viewport" content="width=device-width, height=device-height, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

Je n'ai essayé que pour la largeur mais le résultat n'est pas celui souhaité, est-ce que je fais quelque chose de mal?

htmlzoomscalemeta-tags
9
slash197

Je ne sais pas exactement ce que vous essayez de réaliser, mais avec le code HTML suivant

<meta name="viewport" content="width=1280, initial-scale=1">

et le JS suivant

var siteWidth = 1280;
var scale = screen.width /siteWidth

document.querySelector('meta[name="viewport"]').setAttribute('content', 'width='+siteWidth+', initial-scale='+scale+'');

vous devriez pouvoir afficher la page initiale en zoom avant ou arrière sur les appareils mobiles. Vous devez vérifier que l'appareil est en mode portrait. Pour le paysage, vous devez utiliser screen.height plutôt que screen.width

6
Ben

Pour moi, je crée un fichier de mise en page css le relie à mon fichier html et interroge chaque largeur ou vous pouvez apprendre bootstrap et votre site sera prêt pour le mobile sans faire ce que je fais (le bootstrap est une douleur) pour éditer js pour moi) En ce qui concerne l'interrogation, voici comment je l'écris

dans votre html

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

puis dans votre css

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.css-element {
yourcsscode:;
}
   }

Je voudrais simplement l'écrire comme vous voulez votre CSS pour votre page Web, puis construire les dimensions comme ce qui est illustré ci-dessus permet également de dire que vous vouliez qu'une barre de menu apparaisse, vous pouvez créer un CSS pour la navigation principale, puis utiliser @media puis changer le CSS pour que ce nav fasse apparaître les barres de menu.

aussi

.css-element{
display:block;
}

et

.css-element{
display:none;
}

Sont vraiment utiles lors de l'interrogation

4
Anthony

Il existe différentes façons de concevoir un site Web réactif.

Requête multimédia CSS.

          /* For mobile phones: */
          [class*="col-"] {
        width: 100%;
           }
          @media only screen and (min-width: 600px) {
         /* For tablets: */
       .col-m-1 {width: 8.33%;}
       .col-m-2 {width: 16.66%;}
       .col-m-3 {width: 25%;}
       .col-m-4 {width: 33.33%;}
       .col-m-5 {width: 41.66%;}
       .col-m-6 {width: 50%;}
       .col-m-7 {width: 58.33%;}
      .col-m-8 {width: 66.66%;}
      .col-m-9 {width: 75%;}
      .col-m-10 {width: 83.33%;}
      .col-m-11 {width: 91.66%;}
      .col-m-12 {width: 100%;}
         }
        @media only screen and (min-width: 768px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
         }

Voir le port.

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

Au lieu de $(window).width(), essayez window.outerWidth. Utilisez également votre largeur préférée en pixels au lieu de device-width. Le code devient donc:

var scale = window.outerWidth / 1280;

$('head').append('<meta name="viewport" content="width=1280, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

Il fonctionne sur les versions mobiles de Chrome, Opera et Firefox. Faites moi savoir comment ça marche pour vous.

1
Rei

Application de bootstrap.

Essayez d'utiliser col-xs (col-xs-4 à col-xs-12) pour toutes vos classes div et donnez à vos éléments une largeur/hauteur fixe à l'aide des requêtes multimédia css.

0
edward

Calculer dynamiquement la largeur à l'aide de window.innerWidth & window.outerWidth Propriétés.

0
Ghost Developer