关于viewport设置求教

需求是这样的
一个html页面，要求不论屏幕竖着还是横着画面的整体内容特别是文字随之放大缩小
排版不变
例子如下图如例子中一样是整体页面填充变大而不能留余白
我做好了一个html页面
虽然完成了针对不同屏幕大小的手机页面整体按照比例显示
可是内部文字却不随之变化
网上查了很多资料都说文字的大小需要通过js来设定
但是领导说只需要设置viewport就可以完成文字大小自动变换了
查阅很多资料依然无解请求各位大神帮忙
拜谢！

解决方案 »

  1.   

    http://devfiles.myopera.com/articles/5082/ex02combo.png
    这个图是你希望实现的排版是吧？文字大小实际上是没变的是吧？你希望变的只是文字根据屏幕大小自动换行？
    HTML里面实现非常简单，把文字都放到一个Table里面，再设置Table的宽度，比如96%。<table border="0" width="96%" cellspacing="0" cellpadding="0">
    <tr>
    <td>你的文字放这里</td>
    </tr>
    </table>
    你现在做出来的是什么样的？截图发个上来？
      

  2.   

    非常抱歉，我粘贴错图了。
    其实例子的图是这个
    http://devfiles.myopera.com/articles/5082/ex01combo.png。
    我还是需要改变文字大小的
      

  3.   

    抱歉例子的图粘贴错了
    示例的图片地址是http://devfiles.myopera.com/articles/5082/ex01combo.png
      

  4.   

    你要的是这个效果？？
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>测试</title>
    </head>
    <body>
    <Script language="javascript">
    //获取屏幕宽度
    var w = (window.innerWidth)?window.innerWidth:(document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth:document.body.offsetWidth;
    var baseWidth = 320; //设置基本宽度
    var baseSize = 14; //设置基本字体
    var fontsize = Math.round(w/baseWidth * baseSize);
    document.write ("<style type=\"text/css\">td{font-size:" + fontsize + "px;}</style>");
    </Script><table border="0" width="96%" cellspacing="0" cellpadding="0">
    <tr>
    <td>你的文字放这里</td>
    </tr>
    </table>
    </body>
    </html>
      

  5.   


    没错,是这个效果,我试了一下
    不过我们领导说不需要用JS
    只要设置一个viewport就行
    这点让我百思不得其解啊
      

  6.   

    那你就按老板说的加上去，不过Android的兼容性比较差，这个估计好多手机都会不正常<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="viewport" content="width=device-width">
    <title>测试</title>
    </head>
    <body>
    <table border="0" width="96%" cellspacing="0" cellpadding="0">
        <tr>
            <td>你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，</td>
        </tr>
    </table>
    </body>
    </html>
      

  7.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="viewport" content="target-densitydpi=device-dpi">
    <title>测试</title>
    </head>
    <body>
    <table border="0" width="96%" cellspacing="0" cellpadding="0">
        <tr>
            <td>你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，你的文字放这里，</td>
        </tr>
    </table>
    </body>
    </html>