Как установить viewport meta для iPhone, который правильно обрабатывает вращение?
поэтому я использую:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
чтобы мой HTML-контент хорошо отображался на iPhone. Он отлично работает, пока пользователь поворачивает устройство в ландшафтный режим, где отображение остается ограниченным до 320px.
есть ли простой способ указать окно просмотра, которое изменяется в ответ на изменение пользователем ориентация устройства? Или я должен прибегнуть к Javascript, чтобы справиться с этим?
9 ответов
просто пытался разобраться в этом сам, и решение, которое я придумал, было:
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
это, кажется, блокирует устройство в масштабе 1.0 независимо от его ориентации. В качестве побочного эффекта он полностью отключает масштабирование пользователя (масштабирование Пинча и т. д.).
для тех, кто все еще заинтересован:
http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
на странице:
<meta name="viewport" content="user-scalable=no,width=device-width" />
это предписывает Safari предотвратить пользователь от масштабирования страницы с жестом" щипка " и фиксирует ширина порта просмотра до ширины экран, который когда-либо ориентация iPhone в.
вы не хотите потерять параметр масштабирования пользователя, если вы можете помочь ему. Мне нравится это решение JS от здесь.
<script type="text/javascript">
(function(doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>
Я придумал немного другой подход, который должен работать на кросс-платформах
http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/
до сих пор я тестировал в on
Самсун галактика 2
- Samsung Галактика s
- Samsung galaxy s2
- Samsung galaxy Note (но пришлось изменить css на 800px [см. ниже]*)
- Motorola
-
iPhone 4
@media screen and (max-width:800px) {
это массивная губа вперед с мобильным развитием ...
вы устанавливаете, что он не может масштабироваться (максимальный масштаб = начальный масштаб), поэтому он не может масштабироваться при повороте в ландшафтный режим. Установить максимальный масштаб=1.6 и это будет правильно по размеру ландшафтном режиме.
у меня была эта проблема сама, и я хотел, чтобы как можно было установить ширину, так и обновить ее на rotate и позволить пользователю масштабировать и масштабировать страницу (текущий ответ предоставляет первый, но предотвращает более поздний как побочный эффект).. поэтому я придумал исправление, которое сохраняет ширину вида правильной для ориентации, но все же позволяет масштабировать, хотя это не супер прямо вперед.
во-первых, добавьте следующий Javascript на веб-страницу, которую вы отображение:
<script type='text/javascript'>
function setViewPortWidth(width) {
var metatags = document.getElementsByTagName('meta');
for(cnt = 0; cnt < metatags.length; cnt++) {
var element = metatags[cnt];
if(element.getAttribute('name') == 'viewport') {
element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
document.body.style['max-width'] = width+'px';
}
}
}
</script>
затем в вашем - (void)didRotateFromInterfaceOrientation: (UIInterfaceOrientation)метод fromInterfaceOrientation добавьте:
float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;
stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];
if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)
// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];
дополнительные настройки можно сделать, изменив более viewportal параметры содержание:
Кроме Того, Я поймите, вы можете поставить прослушиватель JS для onresize или что-то вроде запуска масштабирования, но это сработало для меня, поскольку я делаю это из Cocoa Touch UI framework.
надеюсь, это поможет кому-то:)
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
suport все iphones, все ipads, все андроиды.
просто хочу поделиться, я играл с настройками видового экрана для моего отзывчивого дизайна, если я установил максимальную шкалу до 0,8, начальную шкалу до 1 и масштабируемую до no, то я получаю наименьший вид в портретном режиме и вид iPad для ландшафта: D... это действительно уродливый хак, но он, кажется, работает, я не знаю, почему, поэтому я не буду его использовать, но интересные результаты
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />
наслаждайтесь :)
почему бы просто не обновить страницу, когда пользователь поворачивает экран с помощью JavaScript
function doOnOrientationChange()
{
location.reload();
}
window.addEventListener('orientationchange', doOnOrientationChange);