如何设置HTML元视口以启动100%宽度?

时间:2013-12-10 14:37:18

标签: android html ios css html5

我想在移动设备上以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>

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

最佳做法是什么?

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

回应您对我评论的评论:

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

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