Question

我的页面有问题，在桌面上看起来很正常但在Android上有些文字太大了

以下是代码：

＆＃13;

<!DOCTYPE html>
<html>
        <head>
                <title>raulx222's gallery</title>
                <style>
                @font-face {font-family: PressStart;
                                        src: url(Fonts/PressStart2P.ttf);}
                @font-face {font-family: Bitwonder;
                                        src: url(Fonts/8-BIT-WONDER.TTF);}
               
               
                body {background-color:#242424;}
               
               
                .shadow{text-shadow: 1px 1px 1px #000;}
               
                .md5{font-family:PressStart;
                        color: white;
                        font-size:10px;
                        text-shadow: none;}
                .right{position: absolute;
                                padding:5px;
                                right:20px;
                                top:50%;
                                transform: translateY(-50%);
                                -webkit-transform: translateY(-50%);
                                -ms-transform: translateY(-50%);}
                .row{position:relative;
                        border-radius:25px;
                        background-color:#242424;
                        padding:5px 15px;
                        margin:5px 0;}
                       
                .button:hover{background-color:#33AD5C;
                                                border-radius:25px;
                                                box-shadow: 4px 4px 7px #000;
                                                color:#242424;}
               
                div#title {color:#33AD5C;
                                        font-family:Bitwonder;
                                        font-size:70px;
                                        text-shadow: 4px 4px 7px #000;}
 
               
                div#center {width:1000px;
                                        margin:0 auto;
                                        text-align:center;}
                                       
                                       
                                       
                div#card {position:relative;
                                background-color:#33AD5C;
                                text-align:left;
                                font-family:PressStart;
                                color:#33AD5C;
                                margin:50px;
                                border-radius:10px;
                                padding:20px;
                                box-shadow: 4px 4px 7px #000;}
                span#androidfh{font-size:10px;
                                                color:#CCFF33;
                                                position:absolute;
                                                right:10px;
                                                bottom:5px;
                                                text-decoration: underline;}
                span#androidfh:hover{color:#FFFF00;}
                span#new{color:red;}
                span#old{color:#CCFF33;}
                a {
                        color: inherit;
                        text-decoration: none;}
                </style>
        </head>
<body>
<div id="center">
        <!-- Title -->
        <div id="title">
                                <a href="http://forum.xda-developers.com/member.php?u=4964524" target="_blank">raulx222</a>
        </div>
       
        <!-- Card/menu/whatever -->
       
        <div id="card" class="shadow">
<a href="https://www.androidfilehost.com/?w=files&flid=25005"><span id="androidfh">AndroidFileHost folder</span></a>
<span id="new">*NEW*</span>
                <!-- The first row! -->
                <div class="row">
                                                <span>AROMA-LP-GAPPS-20150320[438.3MB]
                                                </span><br />
                                                                <span class="md5">
                                                                                                        <sup>MD5: 2fe69a5fb4cf2ddf58de9f2d92591ef2
                                                                                                        </sup>
                                                                </span>
                                                <a href="https://www.androidfilehost.com/?fid=95916177934544080"><span class="right button">Download</span></a>
                </div>
<span id="old">*OLD*</span>
                <!-- The second row! -->
                <div class="row">
                                                <span>AROMA-LP-GAPPS-STOCK-20150222[439.2MB]
                                                </span><br />
                                                                <span class="md5">
                                                                                                        <sup>MD5: 013c613f6d02be5b218adf876bbe2b62
                                                                                                        </sup>
                                                                </span>
                                                <a href="https://www.androidfilehost.com/?fid=95916177934534257"><span class="right button">Download</span></a>
                </div>
               
                <div class="row">
                                                <span>LP-GAPPS-STOCK-20150202[430.8MB]
                                                </span><br />
                                                                <span class="md5">
                                                                                                        <sup>MD5: a2ad1b08178749c9ed7c2f496b91ca8f
                                                                                                        </sup>
                                                                </span>
                                                <a href="https://www.androidfilehost.com/?fid=95916177934521820"><span class="right button">Download</span></a>
                </div>
               
                <div class="row">
                                                <span>LP-GAPPS-STOCK-20150125[422.3MB]
                                                </span><br />
                                                                <span class="md5">
                                                                                                        <sup>MD5: e75a1d5e5a6896a360c6fc49d3f1a6c6
                                                                                                        </sup>
                                                                </span>
                                                <a href="https://www.androidfilehost.com/?fid=95916177934516917"><span class="right button">Download</span></a>
                </div>
               
                <div class="row">
                                                <span>LP-GAPPS-STOCK-20150123[424.6MB]
                                                </span><br />
                                                                <span class="md5">
                                                                                                        <sup>MD5: 4da4bba992ef3b3afb6a219a94b7941b
                                                                                                        </sup>
                                                                </span>
                                                <a href="https://www.androidfilehost.com/?fid=95897840722648832"><span class="right button">Download</span></a>
                </div>
        </div>
</div>
</body>
</html>

＆＃13;

Android的屏幕截图：

enter image description here

桌面屏幕截图：

enter image description here

我发现如果我为元素设置了一个高度，那么在Android上，文本会保持正常的大小。但是如果需要的话，我希望高度元素能够自动扩展。只有文字： NEW ， OLD ，AROMA（...）和MD5 :( ...）太大，其他文字看起来很好。

这里是webpage url

Answer 1

尝试使用视口元标记

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

更多详情：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

有些文字在Android上太大了，但在桌面上看起来应该是这样

1 个答案: