web-dev-qa-db-fra.com

Mettre à l'échelle tout le corps lors du redimensionnement de la fenêtre

Je voudrais créer un site Web qui ne réagisse pas, mais si les fenêtres sont redimensionnées, tout est redimensionné, et conserve le même ratio Peu importe si les mots sont trop petits dans un petit écran, la première priorité est d'empêcher le chevauchement des éléments lors du redimensionnement.

J'ai essayé d'utiliser:

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

Et

<script type="text/javascript">
  $(document).ready(function () {

    $(window).resize(function () {
      calculateNewScale();
    });

    calculateNewScale(); // if the user go to the page and his window is less than 1920px

    function calculateNewScale() {
      var percentageOn1 = $(window).width() / 1920);
      $("body").css({
        "-moz-transform": "scale(" + percentageOn1 + ")",
        "-webkit-transform": "scale(" + percentageOn1 + ")",
        "transform": "scale(" + percentageOn1 + ")"
      });
    }
  });

Et aussi avec CSS

body {
width:100vw;
height:100vh;
}

Le site est ici:

kotechweb.com/new_focus/page/about_us

Le problème est qu’à l’heure actuelle, le contenu est recouvert lorsqu’il est redimensionné.

htmlcsstwitter-bootstraplayout
17
user782104

Le port de vue: <meta name="viewport" content="width=device-width, initial-scale=1">. Le navigateur affichera ainsi la largeur de la page sur la largeur de son propre écran . Cet article fournit davantage d'informations sur les balises méta de la fenêtre d'affichage: https://developer.mozilla.org/en/ docs/Mozilla/Mobile/Viewport_meta_tag

9
Victor Luna

<meta id = "meta" name = "viewport" content = "width = width-device; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0;">
ne fonctionne que lorsque la fenêtre est chargée et non redimensionnée

calculateNewScale (), la fonction essaie seulement de redimensionner le corps La taille de votre police est définie en px - remplacez-la par% ou rem

Je sais que vous ne voulez pas que le site soit réactif, mais la définition de requêtes de médias CSS peut vous aider.

4
Lucky Chingi

vous pouvez utiliser pour faire une réponse

1.width = device-width part définit la largeur de la page pour suivre la largeur d'écran de l'appareil (qui varie en fonction de l'appareil) la page est d'abord chargée par le navigateur . meta name = "viewport" content = "width = device-width, initial-scale = 1.0"

quelques règles supplémentaires: 1. N'utilisez PAS d'éléments de grande largeur fixe 2. Ne laissez PAS le contenu s’appuyer sur une largeur de fenêtre particulière pour un bon rendu 3. Utilisez les requêtes de média CSS pour appliquer un style différent aux petits et grands écrans

vous pouvez également utiliser la propriété de média et appliquer des fichiers CSS.

3
Vyankatesh Shirde

Votre balise de fenêtre d’affichage est incorrecte, elle devrait être <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Mais peut-être que <meta name="viewport" content="user-scalable=no" /> fonctionnera.

2
andreasbecker.de

Vous pouvez faire peu de choses: 1. changer votre mise en page HTML. Placez l’image, le contenu et le pied de page dans un conteneur ou une enveloppe comme

<html>
  <head></head>
  <body>
    <div id="wrapper">
      //everything goess inside here
    </div>
  </body>
</html>

  1. utilisez rem/em au lieu de px. Vous n'avez pas utilisé rem/em/vw de manière cohérente. Signification, pour la marge de gauche, vous avez utilisé 50px. Et il y aura un moment où cela provoquera un changement de Word.

  2. votre tag comprend bootstrap. Si vous utilisez bootstrap, utilisez plutôt BootStrap Grid. Je construirais d’abord une page pour un affichage mobile, puis j'utiliserais la même disposition pour un écran plus grand.

bonne chance.

2
sagarthapa

Si vous utilisez bootstrap, vous pouvez simplement changer votre classe de conteneur à class = "container-fluid"

2
Mark

En utilisant pure transform: scale (x), vous allez rencontrer beaucoup de problèmes de marge, de centrage et de positionnement, à moins que vous ne compensiez avec une logique javascript.

Certaines choses CSS que vous pouvez faire:

1) Vous pouvez créer l’échelle de fond principale en fonction de la largeur du navigateur en appliquant

body { 
  background-size: cover;
  background-repeat: no-repeat;
}

2) Vous pouvez faire toutes les unités de mesure basées sur les unités vw similaires à ceci:

Mise à l'échelle de la police en fonction de la largeur du conteneur

par exemple, si vous souhaitez que vos polices s’adaptent à votre largeur, vous pouvez définir

body {
  font-size: 0.835vw; //around 14px at 1920px
}

Un autre exemple est le suivant: si vous souhaitez que le conteneur mesure 300px de haut et 1920px de large en fonction de la largeur, vous pouvez créer ce conteneur.

.container {
  height: 150vw; //around 300px at 1920px
}

Vraisemblablement, vous n'essayez pas de garder le pied de page au bas de toutes les tailles? Sinon, vous pouvez simplement utiliser position: fixed; sur le pied de page.

De plus, si vous conservez un format d'image fixe, vous obtiendrez un espacement très amusant si la hauteur du navigateur est supérieure à la largeur. Êtes-vous sûr que c'est ce que vous voulez?

N'oubliez pas qu'il s'agit d'un moyen très étrange de redimensionner le contenu, ce qui peut entraîner des problèmes de performance et de lisibilité (à votre connaissance). La plupart des gens recommandent d'utiliser simplement une balise méta pour les périphériques ou de rendre vos éléments réactifs.

1
Vincent Chan