我想弄清楚如何利用移动视口元标签来自动缩放HTML页面的内容，以适应web视图。
约束条件包括:- HTML可能有也可能没有固定大小的元素(例如img的固定宽度是640)。换句话说，我不想强迫内容是流动的，并使用%'s。
- 我不知道webview的大小，我只知道它的纵横比
例如，如果我有一个单一的图像(640x100px)，我希望图像缩小，如果webview是300x250(缩放到适合)。另一方面，如果webview是1280x200，我希望图像放大并填充webview(缩放到适合)。
在阅读了android文档和iOS文档的视口后，这似乎很简单:因为我知道我的内容的宽度(640)，我只是设置视口宽度为640，让webview决定它是否需要缩放内容以适应webview。
如果我把下面的图片放到我的android/iPhone浏览器或320x50的webview中，图像不会缩小以适应宽度。我可以左右滚动图片..
<!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="http://www.dmacktyres.com/img/head_car_tyres.jpg">
</body>
</html>
我在这里做错了什么?viewport meta标签是否只放大<webview区域?>
在标题中添加
//Include jQuery
<meta id="Viewport" name="viewport" content="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>
我想这应该对你有帮助。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
告诉我它是否有效。
p/s:这是一些标准设备的媒体查询。http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
ok，这是我100%原生javascript的最终解决方案:
<meta id="viewport" name="viewport">
<script type="text/javascript">
//mobile viewport hack
(function(){
function apply_viewport(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
var ww = window.screen.width;
var mw = 800; // min width of site
var ratio = ww / mw; //calculate ratio
var viewport_meta_tag = document.getElementById('viewport');
if( ww < mw){ //smaller than minimum size
viewport_meta_tag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw);
}
else { //regular size
viewport_meta_tag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww);
}
}
}
//ok, i need to update viewport scale if screen dimentions changed
window.addEventListener('resize', function(){
apply_viewport();
});
apply_viewport();
}());
</script>
对于Android有添加目标密度标签。
target-densitydpi=device-dpi
那么，代码看起来就像
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" />
请注意，我相信这个附加功能只适用于Android(但既然你有答案，我觉得这是一个很好的附加功能)，但这个应该适用于大多数移动设备。
将style="width:100%;max-width:640px"添加到图像标签将其缩放到视口宽度，即对于较大的窗口，它将看起来固定宽度。
尝试为img标签添加style="width:100%;"这样，图像将填充整个页面的宽度，因此，如果图像比视窗大，则缩放。
我有和你一样的问题，但我关心的是列表视图。当我尝试滚动列表视图固定头也滚动一点点。问题是列表视图高度小于视窗(浏览器)高度。你只需要降低你的视口高度低于内容标签(内容标签内的列表视图)的高度。这是我的meta标签;
<meta name="viewport" content="width=device-width,height=90%, user-scalable = no">
希望这对你有帮助。
来，让我告诉你我所知道的:
Glitch的hello-website模板使用了一个像这样的元标记来调整模板上的内容:
<meta name="viewport" content="width=device-width, initial-scale=1">
它应该能解决你的问题。
p。店员:一定要放在标题标签上!
很抱歉我之前的回答，这应该能更好地解释它。
你所经历的行为是正确的，它与移动浏览器上的视口元标签如何工作有关。viewport meta标签用于控制网页在移动设备上的显示方式，包括相对于设备的viewport如何缩放和大小。
当您将视口宽度设置为640时，就像您在示例中所做的那样，它有效地将布局视口的宽度设置为640像素。布局视窗是一个假想的视窗，移动浏览器使用它来布局网页内容。但是，这并不一定意味着内容将自动缩放以适合webview区域。
你所看到的行为，图像没有缩小以适应webview的宽度，是因为图像比布局viewport的宽度(640px)大。结果，图像溢出了视口，您可以水平滚动以查看图像的其余部分。
要实现自动缩放内容以适应webview的预期行为，您可以使用"initial-scale"属性。"initial-scale"属性允许您设置网页的初始缩放级别。设置"initial-scale"To 1表示内容将以其原始大小显示，并且不会缩放。
以下是如何修改viewport元标签以实现所需行为的方法:<meta name="viewport" content="width=640, initial-scale=1" />
通过此修改，如果webview的宽度大于640px，图像将按比例缩小以适合webview的宽度，如果webview的宽度大于640px，图像将以其原始大小显示。
请注意，移动浏览器在处理视口元标签的方式上可能会有所不同，所以在不同的设备和浏览器上测试你的网页总是一个好主意，以确保期望的行为在不同的平台上是一致的。