使用视口元标记缩放适合移动网络内容 [英] scale fit mobile web content using viewport meta tag
问题描述
我想弄清楚如何利用移动视口元标记自动缩放 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).换句话说，我不想强制内容流畅并使用 %'s.
- 我不知道 webview 的大小，我只知道它的纵横比
例如，如果我有一张图片 (640x100px)，如果 webview 为 300x250(缩小以适应)，我希望图片缩小.另一方面，如果 webview 是 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 docs 和<一个 href="http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html" rel="noreferrer">iOS 文档 在视口上，似乎简单:因为我知道我的内容的宽度 (640) 我只是将视口宽度设置为 640 并让 webview 决定是否需要放大或缩小内容以适应 webview.
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 网络视图中，图像不会缩小以适应宽度.我可以左右滚动图片..
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="http://www.dmacktyres.com/img/head_car_tyres.jpg">
</body>
</html>
我在这里做错了什么?视口元标记是否仅缩放到 <;网页浏览区?
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" 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>
这篇关于使用视口元标记缩放适合移动网络内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
