使用视meta标签的规模适合移动网络内容适合、规模、标签、内容
我试图找出如何利用移动视窗meta标签自动缩放HTML页面的内容，以适应Web视图。
I'm trying to figure out how to leverage the mobile viewport meta tag to automatically zoom the contents of a HTML page to fit into a web view.
约束：
中的HTML可能或可能不具有固定尺寸的元素（前的img具有640的固定宽度）。换句话说，我不想强迫内容是流体，并使用％的。 在我不知道的WebView的尺寸，我才知道它的长宽比例如，如果我有一个单独的图像（640x100px）我想要的图像缩小，如果web视图为300x250像素（缩小以适合）。在另一方面，如果web视图为1280x200我想要的图像放大并填写的WebView（扩展，以适应）。
For example, if I have a single image (640x100px) I want the image to zoom out if the webview is 300x250 (scale down to fit). On the other hand, if the webview is 1280x200 I want the image to zoom in and fill the webview (scale up to fit).
看完之后， Android的文档和iOS文档对视，似乎很简单：因为我知道我的内容（640）的宽度，我只是设置视口宽度为640，让web视图决定是否需要缩放内容向上或向下，以适应web视图
After reading the android docs and the iOS docs on viewports, it seems simple: since I know the width of my content (640) I just set the viewport width to 640 and let the webview decide if it needs to scale the content up or down to fit the webview.
如果我把下列我的Android / iPhone的浏览器或320x50的web视图，图像不缩小以适合宽度。我可以滚动的图像左，右......
If I put the following into my android/iPhone browser OR a 320x50 webview, the image does not zoom out to fit the width. I can scroll the image to the right and left..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Viewport</title>
<meta name="viewport" content="width=640" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
vertical-align: top;
}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td
{
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
vertical-align: top;
}
</style>
</head>
<body>
<img src="https://m.xsw88.com/allimgs/daicuo/20230912/5856.png.jpg">
</body>
</html>
我在做什么错在这里？是否视meta标签只能放大到内容为＆lt; web视图区？
What am I doing wrong here? Does the viewport meta tag only zoom into content that is < the webview area?
推荐答案
在头部添加此
//Include jQuery
<meta id="Viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script type="text/javascript">
$(function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
var mw = 480; // min width of site
var ratio = ww / mw; //calculate ratio
if( ww < mw){ //smaller than minimum size
$('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
}else{ //regular size
$('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
}
}
});
</script>
