Co to jest atrybut initial scale, user-scalable, minimum-scale, maximum-scale w meta tagu?

Przeglądałem kod źródłowy strony internetowej i znalazłem ten fragment kodu.

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

Chcę wiedzieć, czym jest skala początkowa, skalowalna przez użytkownika, minimalna skala, maksymalna skala i co oznaczają te wartości? A także powiedz mi, jakie wszystkie wartości akceptują.

Author: Jay Patel, 2014-04-01
Source

6 answers

Są to znaczniki meta viewport i są najbardziej odpowiednie w przeglądarkach mobilnych.

Width=device-width

Oznacza to, że mówimy do przeglądarki "moja strona dostosowuje się do szerokości urządzenia".

Initial-scale

Określa skalę strony internetowej, parametr ten ustawia początkowy poziom powiększenia, co oznacza, że 1 piksel CSS jest równy 1 piksel portu widoku . Ten parametr pomaga podczas zmiany orientacji lub zapobiegania domyślnemu powiększeniu. Bez tego parametr, responsywna strona nie będzie działać.

Maksymalna skala

Maksimum-skala określa maksymalny zoom. Po wejściu na stronę, priorytetem jest maximum-scale=1, i nie pozwoli użytkownikowi na powiększenie.

Minimalna skala

Minimum-skala określa minimalny zoom. Działa to tak samo jak powyżej, ale określa minimalną skalę. Jest to przydatne, gdy maximum-scale jest duże i chcesz ustawić minimum-scale.

Użytkownik-skalowalny

Użytkownik-skalowalny przypisany do 1.0 oznacza strona internetowa umożliwia użytkownikowi powiększanie lub pomniejszanie.

Ale jeśli przypiszesz go do user-scalable=no, oznacza to, że strona nie pozwala użytkownikowi na powiększenie lub pomniejszenie.

 86
Author: Jay Patel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-30 10:30:14

Użytkownik-skalowalny:

User-scalable = yes (domyślnie), aby umożliwić użytkownikowi powiększenie lub powiększenie na stronie;

User-scalable = no , aby uniemożliwić użytkownikowi powiększanie lub pomniejszanie.

Możesz uzyskać więcej szczegółowych informacji, czytając następujące artykuły, mam nadzieję, że pomocne dla ty!

Http://www.html-5.com/metatags/meta-viewport.html

Https://css-tricks.com/snippets/html/responsive-meta-tag/

Https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes Tutaj wpisz opis obrazka

Kod Demo (zalecany) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
</head>
<body>
    <header>
    </header>
    <main>
        <section>
            <h1>do not using <mark>user-scalable=no</mark></h1>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
 15
Author: xgqfrms,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-13 09:06:59

viewport meta tag w przeglądarce mobilnej,

Właściwość initial-scale kontroluje poziom powiększenia, gdy strona jest ładowana po raz pierwszy. Maksymalna skala, właściwości minimal-scale i user-scalable kontrolują, w jaki sposób użytkownicy mogą powiększać lub pomniejszać stronę.

 7
Author: Wundwin Born,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-01 05:54:39

Służy do sterowania aspektem na telefonach komórkowych i tabletach. Więcej informacji znajdziesz tutaj: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

 0
Author: Samuel De Backer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-01 05:49:59

Ten meta tag jest używany przez wszystkie responsywne strony internetowe, czyli te, które są zaprojektowane do układania na różnych typach urządzeń-telefon, tablet i komputer. Atrybuty robią to, co mówią. Jednak, jak wskazuje MDN za pomocą znacznika meta viewport do sterowania układem w przeglądarkach mobilnych ,

Na ekranach o wysokiej rozdzielczości DPI strony z initial-scale=1 będą skutecznie powiększane przez przeglądarki.

Znalazłem, że następujące zapewnia, że strona wyświetla się z zerowym powiększeniem przez default.

<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">

 0
Author: Ron Royston,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-13 17:11:16

Następnymi atrybutami znacznika metadanych viewport

Width: Szerokość Wirtualnego viewportu urządzenia. Device-width: fizyczna szerokość ekranu urządzenia. Wysokość: Wysokość "Wirtualnego viewportu" urządzenia. Wysokość urządzenia: fizyczna wysokość ekranu urządzenia. Initial-scale: początkowe powiększenie podczas odwiedzania strony. 1.0 nie powiększa. Minimalna skala: minimalna kwota, którą odwiedzający może powiększyć stronę. 1.0 nie powiększa. Maksimum-skala: maksymalna ilość odwiedzający może powiększyć stronę. 1.0 nie powiększa. skalowalność użytkownika: pozwala urządzeniu powiększać i pomniejszać. Wartości to tak lub nie.

 -1
Author: Jayampathy Wijesena,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-03 06:40:44