logo标签列表

使用视口元标记来缩放适配移动网络内容的比例

androidiphoneiosmobileviewport
39
我正在尝试利用移动视口meta标签自动缩放HTML页面的内容以适应Web视图。约束条件如下：
- HTML页面可能具有固定大小的元素（例如，img具有640像素的固定宽度）。换句话说，我不想强制内容变成流体并使用百分比。 - 我不知道Web视图的大小，只知道其纵横比。
例如，如果我有一张单独的图片（640x100像素），如果Web视图是300x250，则希望图片缩小以适应。另一方面，如果Web视图是1280x200，则希望图片放大并填充Web视图。
阅读了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区域的内容吗？

你已经有解决方案了吗？ - Superbiji
1
还没有。我猜没有简单的解决方案。 - rynop
9个回答
58

在标签中添加如下内容

//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>
4
不错的解决方案，但我认为 viewport meta 标签中有一个错别字。属性应该是 content 而不是 width，对吗？ - Mike Garcia
20
6
这将使视力受损的用户无法进行缩放和放大操作，因为他们无法阅读你所选择的字体大小。 - Volker E.
12

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

对于Android系统，有一个名为target-density标签的附加功能。

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（但既然你有答案，我觉得这是一个好的额外补充），但是这个添加功能应该适用于大多数移动设备。
谢谢，设置target-densitydpi=2像魔术一样解决了我的问题。 - Luke Dennis
3
"target-densitydpi"已从WebKit中移除。请参考http://trac.webkit.org/changeset/119527。 - Steve Ruiz
2

在图像标签中添加style="width:100%;max-width:640px"将使其按比例缩放到视口宽度，即对于更大的窗口，它看起来是固定宽度。

0
尝试在img标签中添加style="width:100%;"。这样，图像将填满整个页面的宽度，如果图像大于视口，则会缩小。
是的，如果一切都是流动的，那么这解决了问题，但根据我的第二个要点：“我不想强制内容成为流体并使用％”，请考虑整个网站中有许多项目 - divs、canvas、iframe等...我知道页面的固定宽度 - 我希望Web视图缩放到我指定的固定宽度。 - rynop
0

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

这是我的元标记；

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

希望这可以帮到你。谢谢。
-1

让我来展示一下我的知识：

Glitch的hello-website模板使用了和这个一样的meta标签来调整模板上的内容大小：

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

这应该可以解决你遇到的问题。

附注：请确保将其放在头标签中！

-2
抱歉之前的回答可能不够清楚，这次我会解释得更好一些。
你所遇到的行为是正确的，与移动浏览器上视口元标签的工作方式有关。视口元标签用于控制网页在移动设备上的显示方式，包括如何缩放和调整相对于设备视口的大小。
当你将视口宽度设置为640像素，就像你在示例中所做的那样，实际上是将布局视口的宽度设置为640像素。布局视口是移动浏览器用来布局网页内容的虚拟视口。然而，这并不意味着内容会自动缩放以适应Web视图区域。
你看到的行为，即图像不会缩小以适应Web视图的宽度，是因为图像大于布局视口的宽度（640像素）。结果，图像超出了视口范围，你可以水平滚动查看图像的其余部分。
要实现自动缩放内容以适应 Web 视图的期望行为，可以使用视口元标记的 "initial-scale" 属性。"initial-scale" 属性允许您设置网页的初始缩放级别。将 "initial-scale" 设置为 1 表示内容将以其原始大小显示，并且不会进行缩放。
以下是修改视口元标记以实现所需行为的方法：
<meta name="viewport" content="width=640, initial-scale=1" />

通过这个修改，如果图像的大小超过640px，它将被缩小以适应webview的宽度，并且如果webview的宽度大于640px，则以原始尺寸显示。

请注意，移动浏览器可能会在处理视口元标记时有所差异，因此建议您在不同设备和浏览器上测试您的网页，以确保所需的行为在不同平台上一致。

1
这个回答看起来像是ChatGPT - DavidW
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接