使用视口元标记缩放适合移动网页内容

发布于 2024-12-25 08:13:13 字数 1871 浏览 2 评论 0原文

我试图弄清楚如何利用移动视口元标记自动缩放 HTML 页面的内容以适合 Web 视图。

约束：

HTML 可能有也可能没有固定大小的元素（例如 img 的固定宽度为 640）。换句话说，我不想强迫内容变得流畅并使用%。
我不知道 webview 的大小，我只知道它的纵横比

例如，如果我有一个图像（640x100px），我希望图像在 webview 为 300x250 时缩小（缩小以适合）。另一方面，如果 web 视图为 1280x200，我希望图像放大并填充 web 视图（放大以适合）。

阅读 android 文档和 iOS 文档视口，这看起来很简单：因为我知道内容的宽度（640），所以我只需将视口宽度设置为 640 并让 webview 决定是否需要放大或缩小内容以适应 webview。

如果我将以下内容放入我的 android/iPhone 浏览器或 320x50 网页视图中，图像不会缩小以适应宽度。我可以左右滚动图像。

<!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>

我在这里做错了什么？视口元标记是否仅放大到 << 的内容？网页视图区域？

原文

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.

Constraints:

The HTML may or may not have fixed size elements (ex img has a fixed width of 640). In other words I don't want to force the content to be fluid and use %'s.
I do not know the size of the webview, I just know its aspect ratio

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).

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.

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

灰色世界里的红玫瑰 2025-01-01 08:13:14

我遇到了和你一样的问题，但我担心的是列表视图。当我尝试滚动列表视图固定标题时，也会滚动一点。问题是列表视图高度小于视口（浏览器）高度。您只需将视口高度降低到低于内容标签（内容标签内的列表视图）高度即可。
这是我的元标记；

<meta name="viewport" content="width=device-width,height=90%,  user-scalable = no">

希望这会有所帮助。谢谢。

I had same problem as yours, but my concern was list view. When i try to scroll list view fixed header also scroll little bit. Problem was list view height smaller than viewport (browser) height. You just need to reduce your viewport height lower than content tag (list view within content tag) height.
Here is my meta tag;

<meta name="viewport" content="width=device-width,height=90%,  user-scalable = no">

Hope this will help.Thnks.

回复收藏 0 原文

我们的影子 2025-01-01 08:13:14

在这里，让我向您展示我所知道的：

Glitch 的 hello-website 模板使用一个像这样的元标记来调整模板上的内容：

 <meta name="viewport" content="width=device-width, initial-scale=1">

它应该可以解决您遇到的问题。

PS：一定要把它放在head标签中！

Here, let me show you what I know:

Glitch's hello-website template uses a meta tag just like this one to rezise content on the template:

 <meta name="viewport" content="width=device-width, initial-scale=1">

It should fix the problem you are having.

P.S: make sure you put it in the head tag!

回复收藏 0 原文

枕花眠 2025-01-01 08:13:13

在头部添加这个

//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>

In the head add this

//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>

回复收藏 0 原文

病女 2025-01-01 08:13:13

我想这应该对你有帮助。

<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 -标准设备/

I think this should help you.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Tell me if it works.

P/s: here is some media query for standard devices. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

回复收藏 0 原文

青衫负雪 2025-01-01 08:13:13

好的，这是我使用 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>

ok, here is my final solution with 100% native 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>

回复收藏 0 原文

筱武穆 2025-01-01 08:13:13

对于 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”（但既然您已经有了答案，我觉得这是一个很好的额外功能），但这应该适用于大多数移动设备。

For Android there is the addition of target-density tag.

target-densitydpi=device-dpi

So, the code would look like

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" />

Please note, that I believe this addition is only for Android (but since you have answers, I felt this was a good extra) but this should work for most mobile devices.

回复收藏 0 原文