我想在移动设备上以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>
它在横向视图中工作正常,但如果我以肖像开始......所以我的工作效果不佳。它像风景一样放大。
最佳做法是什么?
答案 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
属性中删除该部分,它应该按照您想要的方式运行。