Question

我已经尝试过这个，我在几个网站上找到了这个：

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

问题是我的网站标题在手机上被缩小到一半宽度，但在PC上看起来很好。

相关网站为SamanthaFishFans.com

任何人都可以提供一个理由，为什么只有标题（这是Master页面的一部分）在手机上显示错误，但网站的其余部分看起来是否正确？

标题的代码如下所示：

<header>
<div class="page">
    <div class="header">
        <table>
           <tr style="height:82px">
              <td><img src="/Images/SamLogo4.gif" style="height:80px; width:auto" /></td>
              <td style="width:30px"></td>
              <td><h1><b style="vertical-align:bottom;padding-top:20px">KCFishFans.com</b></h1></td>
           </tr>
        </table>

        <div class="clear hideSkiplink" id="MainMenu">
            <a href="#NavigationMenu_SkipLink" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">Skip Navigation Links</a>
            <div class="menu" id="NavigationMenu">
                <ul class="level1">
                    <li><a class="level1" href="Default.aspx">Home</a></li>
                    <li><a class="level1" href="Biography.aspx">Biography</a></li>
                    <li><a class="level1" href="Tourography.aspx">Tourography</a></li>
                    <li><a class="level1" href="Discography.aspx">Discography</a></li>
                    <li><a class="level1" href="Stats.aspx">Statistics</a></li>
                    <li><a class="level1" href="http://KCFishFans.freeforums.net">Messageboard</a></li>
                    <li><a class="level1" href="Help.aspx">Help</a></li>
                </ul>
            </div><a id="NavigationMenu_SkipLink"></a>
        </div>
    </div>  
</div>

“header”和“page”类的宽度均为“100％”。

它是使用C＃在asp.net中开发的，没有创建Mobile.Master页面，因为我真的不想编写应用程序。我只是希望它在手机上看起来很正常。

Answer 1

我试图通过CSS以不同的方式改变体宽，并且它有效。我在CSS中使用媒体查询，如下所示：

@media screen and (min-width: 980px) /* Desktop */ {
  body {
    your code here
  }
}

@media screen  and (max-width: 979px) /* Tablet */ {
  body {
   your code here
  }
}

@media screen and (max-width: 500px) /* Mobile */ {
  body {
    your code here
  }
}

Answer 2

使用表格绝对不是那种方式。我想这就是你在移动屏幕上显示问题的原因。您应该使用CSS Media Queries进行响应式设计。

网站标题在手机上看起来与PC不同

2 个答案: