Как настроить HTML-окно просмотра мета, чтобы начать 100% ширины?

Question

Как настроить HTML-окно просмотра мета, чтобы начать 100% ширины?

0

Я хочу показать свой веб-сайт на мобильных устройствах в пейзаже и портретном представлении шириной 100%.

Я пробовал этот HTML-код без объявления CSS:

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>test page</title>
</head>
<body>
    <div style="width: 1000px; background:#ff0">hello world</div>
</body>
</html>

Он отлично работает в ландшафтном представлении, но если я начну с портрета... так что я не работаю хорошо. Он увеличен как в виде пейзажа.

Какова наилучшая практика?

netdjw 10 дек. 2013, в 15:51

Источник

0

Вы говорите, что хотите, чтобы веб-страница всегда целиком помещалась на экране? Так что, если портретный режим меньше 1000 пикселей, например, 500 пикселей, он должен уменьшаться, пока веб-страница не уместится в эти 500 пикселей?
TreeTree 10 дек. 2013, в 14:54
0

@TreeTree да, я думаю, что хочу сделать это.
netdjw 10 дек. 2013, в 16:09

Теги:

html

android

css

html5

ios

2 ответа

Ещё вопросы

Вы говорите, что хотите, чтобы веб-страница всегда целиком помещалась на экране? Так что, если портретный режим меньше 1000 пикселей, например, 500 пикселей, он должен уменьшаться, пока веб-страница не уместится в эти 500 пикселей?
@TreeTree да, я думаю, что хочу сделать это.

TreeTree · Answer 1 · 2013-12-10T14-00-00.000Z

В ответ на ваш комментарий к моему комментарию:

Я на 99% уверен, что поведение, которое вы хотите, уже является поведением по умолчанию. Когда вы установите width=device-width часть width=device-width устройства в окне просмотра, это приведет к тому, что устройство будет вести себя подобно вам, просто изменив размер окна браузера на рабочем столе.

Если вы удалите эту часть из атрибута content она должна вести себя так, как вы хотите.

Я попробовал то, что вы предлагаете, но не решил проблему. Страница показала ширину в альбомной ориентации.
Возможно, вы можете попробовать установить его в width=NNN где NNN - ширина вашей страницы.
Извини, я в растерянности. Это поведение, которое я обычно пытаюсь нейтрализовать на мобильных устройствах.

David S. · Answer 2 · 2013-12-10T12-01-00.000Z

Я просто загрузил ваш HTML в базовый WebView, и это выглядит хорошо для меня. Может быть, это проблема с вашим макетом, а не с HTML?

Вот (очень простой) WebView, который я использовал:

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webViewMain"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

И вот onCreate, который я использовал для проверки вашего кода:

WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    webView = (WebView)findViewById(R.id.webViewMain);
    webView.getSettings().setJavaScriptEnabled(true);
    //webView.loadUrl("http://www.google.com");
    String data = "<!DOCTYPE html> <html lang=\"hu\"> <head>     <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">     <title>test page</title> </head> <body>     <div style=\"width: 1000px; background:#ff0\">hello world</div> </body> </html>";
    webView.loadData(data, "text/html", Encoding.UTF_8.toString());
}