Question

我想在移动设备上以100％宽度横向和纵向视图显示我的网站。

我在没有任何CSS声明的情况下尝试了这个HTML代码：

<!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>

它在横向视图中工作正常，但如果我以肖像开始......所以我的工作效果不佳。它像风景一样放大。

最佳做法是什么？

Answer 1

我刚刚将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());
}

Answer 2

回应您对我评论的评论：

我99％肯定你想要的行为已经是默认行为了。当您设置视口的width=device-width部分时，它将使设备的行为类似于您只需调整桌面上的浏览器窗口大小。

如果从content属性中删除该部分，它应该按照您想要的方式运行。

如何设置HTML元视口以启动100％宽度？

2 个答案: