À l'échelle du site web pour les appareils mobiles

J'ai une application web où responsive layout n'est pas une option pour les appareils mobiles, donc j'ai essayé de jouer avec la fenêtre d'affichage de mise à l'échelle un peu, mais n'avait pas réussi à le faire.

Taille de la Page est de 1280 x 720, donc sur les petits écrans, il faut effectuer un zoom arrière et sur les plus grands de zoom:

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 ne l'ai essayé pour la largeur, mais le résultat n'est pas celui désiré, suis-je en train de faire quelque chose de mal?

Avez-vous essayé <meta name="viewport" content="width=1280">?
si j'ajoute que la page ne s'adapte pas sur l'écran de mobile

OriginalL'auteur slash197 | 2017-01-02

  1. 5

    Je ne suis pas sûr exactement ce que vous essayez d'atteindre, mais avec le code html suivant

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

    et suivants JS 

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

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

    vous devriez être en mesure d'afficher la page initiale 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 l'écran.hauteur par opposition à l'écran.largeur

    Pourquoi ai-je besoin de code html et js?
    javascript est utilisé pour mettre à jour la première à l'échelle de la valeur par rapport à l'appareil largeur - je.e initial-scale=0.28125 pour Galaxy s5

    OriginalL'auteur Ben

  2. 4

    Pour moi, j'ai créer un css-fichier de mise en page le lien de mon fichier html et la requête à chaque largeur
    ou vous pourriez apprendre de démarrage et votre site sera mobile prêt sans faire ce que je fais (bootstrap est une douleur pour modifier js pour moi)
    Aussi loin que l'interrogation c'est de cette façon que je l'écrire

    dans votre code 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 juste écrire ce que vous voulez de votre css pour votre site web, puis de construire les dimensions comme ce qui est indiqué ci-dessus permet également de dire que tu voulais une barre de menu apparaisse, vous pouvez créer une feuille css pour le principal de la valeur liquidative, l'utilisation de @media puis modifier le css pour que nav pour faire les barres de menu apparaît.

    aussi

    .css-element{
display:block;
}

    et

    .css-element{
display:none;
}

    Sont vraiment utiles lors de l'interrogation

    OriginalL'auteur Anthony

  3. 2

    Il y a différentes façons de concevoir un site web réactif.

    CSS Media Query.

              /* 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%;}
}

    Vue port.

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

    OriginalL'auteur king zecole

  4. 1

    Au lieu de $(window).width(), essayez window.outerWidth.
    Aussi, utilisez votre préféré largeur en pixels au lieu de device-width.
    Ainsi, le code devient:

    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 des versions mobiles de google Chrome, Opera et Firefox. Permettez-moi de savoir comment cela fonctionne pour vous.

    OriginalL'auteur Rei

  5. 0

    Quand je l'ai essayé à l'aide de google Chrome devTools, le scale variable semble être d'environ le double de la quantité correcte. En divisant par 2 fixe le problème pour moi:

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

    OriginalL'auteur Kelsey Edelstein

  6. 0

    Calculer la largeur de façon dynamique à l'aide de window.innerWidth & window.outerWidth propriétés.

    OriginalL'auteur Ghost Developer

  7. 0

    L'application du bootstrap.

    Essayez d'utiliser col-xs (col-xs-4-col-xs-12) pour tous vos div classes et donner vos éléments fixes largeur/hauteur à l'aide de css media queries.

    OriginalL'auteur edward