Jak mogę użyć meta viewport i CSS media queries, aby średnia strona 960px wyglądała dobrze na iPhonie i iPadzie?
Pytanie
Wiem, że na Stack Overflow jest wiele pytań dotyczących znacznika meta viewport, ale nie mogę znaleźć nikogo, kto zadaje pytanie, które wydaje się być najbardziej oczywiste i użyteczne:
Jak mogę użyć meta viewport i CSS media queries, aby przeciętny Projekt strony internetowej o rozdzielczości 960px wyglądał dobrze na iPadzie( i komputerze), zachowując jednocześnie mniejszy widok i projekt strony (np. 320px) dla iPhone ' a i innych telefonów komórkowych?
Dla iPhone, myślę, że to jest rzeczą oczywistą: mniejsza, przyjazna dla telefonu Strona (np. Ale w przypadku większego ekranu iPada specjalna strona mobilna nie jest tak naprawdę konieczna; użycie normalnego projektu strony 960px wydaje się właściwe. Strona 320px wygląda błazeńsko na iPadzie i nie zawsze chcę zaprojektować trzecią odmianę dla iPada 768px.
Oto problem: nie mogę rozgryźć, jak użyć meta viewport tag i CSS media queries, aby osiągnąć zarówno 1) normalną stronę na iPadzie, jak i 2) a strona mobilna na iPhone . Zdaję sobie sprawę, że jest to możliwe dzięki hackom JavaScript (np. dynamicznej zmianie znacznika meta viewport w zależności od urządzenia), ale nie chcę używać JavaScript; nie sądzę, że JS powinien być wymagany do osiągnięcia podstawowej użyteczności na prostej stronie ze statyczną zawartością.
1) jeśli całkowicie usunę znacznik meta viewport, moja normalna strona 960px wygląda idealnie na iPadzie, ale źle na iPhonie (duży pusty margines po prawej stronie strona): {]}
2) z drugiej strony, Jeśli używam <meta name="viewport" content="width=device-width" />, to strona wygląda świetnie na iPhonie, ale źle na iPadzie (powiększony do 768px, strona wylewa się poza viewport):
Znaczniki / CSS
CSS:
<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>
<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>
Znaczniki:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>
4 answers
Połącz Zapytanie o media z zoom.
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
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
2012-08-13 18:12:31
Spróbuj dodać maksymalną skalę do znacznika meta:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
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
2012-11-25 08:21:43
Możesz użyć JS, aby wyrwać znaczniki meta viewport, takie jak Cole omawia tutaj - http://cole007.net/blog/136/responsiveish-viewport-hack jest też inna opcja w komentarzach
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
2013-01-28 07:35:18
Używam metody php Mobile Detection:
Https://github.com/serbanghita/Mobile-Detect
...następnie PHP w znaczniku head:
<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>
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-01-13 11:37:11