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

问题描述 投票：0回答：9

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

限制：

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

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

在阅读了关于视口的android文档和iOS文档之后，这似乎很简单：因为我知道内容的宽度（640），所以我只需将视口宽度设置为640，然后让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>

我在这里做错了什么？视口元标记是否仅放大为 < the webview area?

的内容
android iphone ios mobile viewport
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>
20
投票

我想这应该对你有帮助。

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

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>
8
投票

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

2
投票

将 

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

0
投票

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

0
投票

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

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

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

0
投票

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

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

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

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

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

0
投票

对我之前的回答感到抱歉，这应该能更好地解释它。

您遇到的行为是正确的，它与视口元标记在移动浏览器上的工作方式有关。视口元标记用于控制网页在移动设备上的显示方式，包括如何相对于设备视口缩放和调整大小。

当您将视口宽度设置为 640 时（正如您在示例中所做的那样），它实际上将布局视口的宽度设置为 640 像素。布局视口是移动浏览器用来布局网页内容的假想视口。然而，这并不一定意味着内容会自动缩放以适应 webview 区域。

您所看到的行为，即图像没有缩小以适应 web 视图的宽度，是因为图像大于布局视口的宽度 (640px)。结果，图像溢出了视口，您可以水平滚动以查看图像的其余部分。

要实现自动缩放内容以适应 Web 视图的所需行为，您可以使用视口元标记的“initial-scale”属性。 “initial-scale”属性允许您设置网页的初始缩放级别。将“initial-scale”设置为1意味着内容将按原始大小显示，并且不会缩放。

以下是修改视口元标记以实现所需行为的方法：

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

通过此修改，如果图像大于 640px，图像将缩小以适合 webview 的宽度，如果 webview 宽于 640px，它将按原始大小显示。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.