相关疑难解决方法(0)

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

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

约束:

HTML可能有也可能没有固定大小的元素(ex img的固定宽度为640).换句话说,我不想强迫内容流畅并使用%.
我不知道webview的大小,我只知道它的宽高比

例如,如果我有一个图像(640x100px),我希望在webview为300x250(缩小到适合)时缩小图像.另一方面,如果webview是1280x200,我希望图像放大并填充webview(放大到适合).

在视口上阅读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>

Run Code Online (Sandbox Code Playgroud)

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

iphone mobile android viewport ios

ryn*_*nop

2012 01-05

35
推荐指数

5
解决办法

11万
查看次数