L'échelle de l'ensemble du corps lors du redimensionnement de la fenêtre
Je voudrais créer un site web qui n'est pas sensible, mais si les fenêtres sont redimensionnées, tout est à l'échelle haut /bas, et de garder le même ratio. Il n'a pas d'importance si les mots sont trop petit à petit écran, la première priorité est d'empêcher l'élément de chevauchement lors de la redimensionner
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 les CSS
body {
width:100vw;
height:100vh;
}
Le site est ici:
kotechweb.com/new_focus/page/about_us
Le problème est, pour l'instant, le contenu est recouverte quand redimensionnée.
- vous pouvez essayer de fenêtre d'affichage unités: caniuse.com/#feat=viewport-units
- Veuillez noter que le MySQL logo n'est pas dans le domaine public. En l'utilisant comme un avatar pourrait être une violation de certains droits d'auteur (mysql.com/about/legal/trademark.html). Mais IANAL.
Vous devez vous connecter pour publier un commentaire.
Le port de la vue:
<meta name="viewport" content="width=device-width, initial-scale=1">
. Cela rendra le navigateur rendu de la largeur de la page à la largeur de son écran.Cet article donne des informations pour la fenêtre d'affichage des balises meta:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0, maximum-scale=1.0; user-scalable=0;">
ne fonctionne que lorsque la fenêtre est chargé de ne pas re-taille
calculateNewScale() la fonction essaie juste de redimensionner le corps
Votre taille de la police sont mis en px - changer en % ou en rem
Je sais que vous ne voulez pas le site réactif, mais la mise en CSS media queries peut aider avec ce que vous voulez.
vous pouvez utiliser pour faire de la réponse
1.width=device-width partie définit la largeur de la page pour suivre l'écran-largeur de l'appareil (qui varie en fonction de l'appareil).
2.initial-scale=1.0 partie définit le niveau de zoom initial lorsque le premier chargement de la page par le navigateur.
par exemple meta name="viewport" content="width=device-width, initial-scale=1.0"
quelques règles supplémentaires:
1. N'utilisez PAS de grande largeur fixe les éléments
2. Ne laissez PAS le contenu compter sur un particulier de fenêtre de la largeur, pour les rendre bien
3. Utiliser les CSS media queries pour appliquer différents style pour les petits et grands écrans
aussi vous pouvez utiliser les médias de propriété et d'appliquer de l'écran sage css.
Il ya quelques choses que vous pouvez faire:
1. modifier votre mise en page HTML. Mettre image, contenu et pied de page à l'intérieur d'un récipient ou l'emballage comme
utiliser rem/em au lieu de px. Vous n'avez pas utilisé rem/em/vw constamment. Sens, pour la gauche de la marge que vous avez utilisé 50px. Et il y aura un moment où il sera la cause de mot de décalage.
votre balise comprend bootstrap. Si vous êtes en utilisant bootstrap....alors vous êtes mieux d'utiliser BootStrap Grille. Je voudrais tout d'abord créer une page pour l'affichage d'un mobile et ensuite, je vais utiliser la même mise en page pour le grand écran.
bonne chance.
Si vous êtes en utilisant bootstrap, vous pouvez simplement changer votre conteneur de classe à l' = "container-fluid"
Votre fenêtre d'affichage de la balise est mal, doit être
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Mais peut-être
<meta name="viewport" content="user-scalable=no" />
fonctionne.À l'aide de pure transform: scale(x), vous allez courir dans beaucoup de marge, de centrage et de positionnement questions, si vous compenser avec un peu de javascript logique.
Un peu de CSS choses que vous pouvez faire:
1) Vous pouvez faire de l'arrière-plan principal échelle basée sur la largeur du navigateur par l'application de
2) Vous pouvez faire toutes les unités de mesure basé sur vw unités de similaire à ceci:
L'échelle des polices fondées sur la largeur du conteneur
par exemple, si vous voulez que vos polices à échelle proportionnelle à la largeur de votre, vous pouvez définir
Un autre exemple est si vous voulez un conteneur qui est 300px de haut en 1920px largeur de gamme basée sur la largeur, vous pouvez faire que le conteneur
Sans doute vous n'êtes pas en essayant de garder le pied de page en bas à toutes les tailles? Sinon, vous pouvez simplement utiliser la position:fixed; sur le pied de page.
Aussi, si vous conservez des proportions fixes, vous allez avoir très drôle espacement si le navigateur de la hauteur est plus grande que la largeur. Êtes-vous sûr que c'est ce que vous voulez?
Gardez à l'esprit, c'est une façon très étrange pour redimensionner le contenu qui pourrait entraîner le rendement et lisibilité des questions (que vous connaissez). La plupart des gens recommandons simplement à l'aide d'une balise meta pour les dispositifs ou des éléments sensibles.