使用视口元标记缩放适合移动 Web 内容答案

【问题标题】：scale fit mobile web content using viewport meta tag使用视口元标记缩放适合移动 Web 内容
【发布时间】：2012-02-02 20:40:39
【问题描述】：

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

约束：

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

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

在阅读了视口上的android docs 和iOS docs 之后，这似乎很简单：因为我知道我的内容的宽度（640），所以我只需将视口宽度设置为 640，然后让 webview 决定它是否需要缩放内容向上或向下以适合 web 视图。

如果我将以下内容放入我的 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>

我在这里做错了什么？视口元标记是否仅放大

【问题讨论】：

你有解决办法吗？
还没有。我猜不可能有简单的解决方案

标签： android iphone ios mobile viewport

【解决方案1】：

在头部添加这个

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

【讨论】：

不错的解决方案，但我认为视口元标记中有错字。属性应该是内容，而不是宽度，对吧？

【解决方案2】：

我认为这应该对你有所帮助。

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

【讨论】：

这样一来，对于无法以您选择的字体大小阅读的视觉障碍用户来说，您将公然无法放大/放大。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

谢谢，设置 target-densitydpi=2 解决了我的问题。
target-densitydpi 已从 WebKit 中删除 trac.webkit.org/changeset/119527

【解决方案5】：

将style="width:100%;max-width:640px" 添加到图像标签会将其放大到视口宽度，即对于较大的窗口，它将看起来固定宽度。

【讨论】：

【解决方案6】：

尝试添加 style="width:100%;"到 img 标签。这样，图像将填满页面的整个宽度，如果图像大于视口，则按比例缩小。

【讨论】：

是的，如果一切都是流畅的，这可以解决问题，但根据我的第二个项目符号：“我不想强迫内容保持流畅并使用 %'s”。想想一个包含一堆项目的整个网站 - div、画布、iframe 等......我知道页面的固定 - 我希望 webview 放大/缩小到我指定的固定宽度。跨度>

【解决方案7】：

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

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

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

【讨论】：

【解决方案8】：

在这里，让我告诉你我所知道的：

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

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

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

P.S：一定要把它放在 head 标签里！

【讨论】：