Масштабируйте мобильный сайт с помощью CSS Viewport

Я хочу изменить внешний вид веб-сайта в мобильном браузере Opera. Я использую пользовательский стиль для изменения некоторых значений CSS, пока это работает хорошо, но страница не масштабируется до полной ширины устройства (в любой ориентации). Так как я в любом случае буду использовать это только для Opera, я могу использовать свойство Opera-CSS "@ -o-viewport"

Вот руководство по его использованию: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Страница имеет фиксированную ширину, я по-прежнему хочу, чтобы устройство увеличивало масштаб веб-сайта, чтобы оно было как можно больше, но при этом отображалась полная ширина страницы.

Когда я пытаюсь это сделать, это не работает. Страница отображается с другим пользовательским стилем, но свойство viewport css не будет работать так, как я предполагал, страница отображается с увеличением около 0,4


person user828591    schedule 12.06.2012    source источник
comment
Можете ли вы поделиться примером кода? Достаточно сложно понять, что именно вы хотите делать, по одному лишь описанию.   -  person andreasbovens    schedule 13.06.2012
comment
Я сейчас сам нашел проблему. Пока я пытался перестроить его на своем собственном сервере в качестве примера кода, я заметил, что проблема в том, что пользовательский css Opera загружается слишком поздно, поэтому правило области просмотра не работает. Когда я, например, написал область просмотра в конце тега body, все работало так, как я и предполагал.   -  person user828591    schedule 13.06.2012
comment
Интересный. Можете ли вы сообщить об ошибке на bugs.opera.com/wizard, указав шаги по воспроизведению? Я буду следить.   -  person andreasbovens    schedule 29.06.2012
comment
Извините за задержку (праздники и прочее), сейчас я сделал отчет об ошибке.   -  person user828591    schedule 08.08.2012


Ответы (2)


вы можете сделать это с помощью области просмотра метатега:

<meta name="viewport" content="width=device-width, initial-scale=1">
person billythetalented    schedule 12.06.2012
comment
Я знаю, что обычно это сработает, но на этот раз мне нужно полагаться только на CSS. - person user828591; 13.06.2012

@ -o-viewport {ширина: $ px}

где $ = ширина страницы, которую вы пытаетесь оптимизировать, в пикселях (например, 800)

person andreasbovens    schedule 12.06.2012
comment
Ой, я только что заметил, что вы написали статью, на которую я ссылался в своем вопросе: D Ну, я написал объяснение в качестве комментария к моему вопросу, вы можете подтвердить то, что я там написал? - person user828591; 13.06.2012