Question

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

约束：

HTML可能有也可能没有固定大小的元素（ex img的固定宽度为640）。换句话说，我不想强迫内容流畅并使用％'s。
我不知道webview的大小，我只知道它的宽高比

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

在视口上阅读android docs和iOS docs之后，看起来很简单：因为我知道我的内容的宽度（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>

我在这里做错了什么？视口元标记是否仅放大到＆lt; webview区域？

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

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

Answer 3

对于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（但由于您有答案，我觉得这是一个很好的额外内容）但应适用于大多数移动设备。

Answer 4

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

Answer 5

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

Answer 6

尝试添加style =“width：100％;”到img标签。这样，图像将填满页面的整个宽度，因此如果图像大于视口，则缩小图像。

Answer 7

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

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

希望这会有所帮助.Thnks。

Answer 8

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

Glitch 的 hello-website 模板使用了一个元标签，就像这个一样来重新调整模板上的内容：

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

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

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

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

8 个答案: