1

firefox が ctr+- を行うように、ブラウザーの幅/高さに応じてページの自動ズームを行うにはどうすればよいですか?

私はcss3スケールを試しましたが、ページの一部が壊れていました（一部の部分は位置が固定されています）、javascriptも試しましたが、多くのjQueryプラグインはうまくいきませんでした

それを作る方法はありますか？

PS:ブラウザのズームを試してみたところ、完璧にフィットしました

ありがとう

4

1 に答える 1

1

これを試して。必要な数のメディア クエリを追加します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
    body{
        color: #666;
        background: #ccc;
        font-family: Arial;
        font-size: 62.5%;
        -moz-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    #page{
        width: 600px;
        background: #fff;
        padding: 20px;
    }
    @media screen and (min-width: 800px){
        body{
            -moz-transform: scale(1.2, 1.2);
            -webkit-transform: scale(1.2, 1.2);
            -ms-transform: scale(1.2, 1.2);
            -o-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
        }
    }
    @media screen and (min-width: 1000px){
        body{
            -moz-transform: scale(1.4, 1.4);
            -webkit-transform: scale(1.2, 1.4);
            -ms-transform: scale(1.4, 1.4);
            -o-transform: scale(1.4, 1.4);
            transform: scale(1.4, 1.4);
        }
    }
</style>
</head>
<body>
<div id="page">
    <h1>Test</h1>
    <h2>Test 2</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut magna tortor, ut feugiat nunc. Aenean blandit imperdiet sem et interdum. Proin adipiscing metus ac sapien dictum sed fringilla odio tincidunt. Morbi tempus nulla ut dolor lacinia fringilla. Praesent ut lorem vel nisi hendrerit bibendum id at velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae metus sed nunc accumsan rutrum et ac magna. Vestibulum blandit nibh sed elit convallis in feugiat augue sollicitudin. Praesent orci felis, pharetra sed laoreet vehicula, tincidunt at mauris. Ut sed vehicula mi. 
    </p>
</div>
</body>
</html>
于 2012-06-20T13:23:13.120 に答える