ryn*_*nop 35 iphone mobile android viewport ios
我正在试图弄清楚如何利用移动视口元标记自动缩放HTML页面的内容以适应Web视图.
约束:
例如,如果我有一个图像(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>
我在这做错了什么？视口元标记是否仅放大<webview区域的内容？
Bre*_*818 55
在头上添加这个
//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>
小智 21
我认为这应该对你有帮助.
<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/
对于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(但既然你有答案,我觉得这是一个很好的额外的),但是这应该为大多数移动设备.
好的,这是我的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>