如何在浏览器和移动设备中正确显示 HTML 页面答案

【问题标题】：How to correctly display HTML page in browser and mobile如何在浏览器和移动设备中正确显示 HTML 页面
【发布时间】：2013-12-05 16:04:41
【问题描述】：

我有以下 HTML 页面。在此页面中，我在桌面和移动浏览器中面临不同的问题。

在桌面浏览器中所有内容都显示，但图像太大。如果我试图让它变小，那么它对于移动设备来说就会变得很小。那么如何实现它，使图标变得适合这两个地方呢？
在移动浏览器border-bottom-style 中不显示，但在桌面浏览器中显示。那么问题出在哪里？

HTML：

<body style="height:100%">
  <table width="100%" height="100%" cellpadding="0" cellspacing="0" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" class="homebackground">
    <tr height="10%">
      <td colspan="3" style="background:url(../../stylesheets/images/user_male.png) no-repeat; background-size: contain;border-bottom-style:solid;border-color: #129AA2; border:1">&nbsp;</td>
    </tr>

    <tr height="80%" style="background:url(../../stylesheets/images/Logo_with_Blu_bg.png); background-size:98% 88%;">
      <td colspan="3">
        <table style="width:100%; height:100%;" border="0" cellpadding="0" cellspacing="0">
          <tr style="height:20%;">
            <td align="right" class="mainbodyup"><img src="../../stylesheets/images/phone.png"/></td>
            <td>&nbsp;</td>
            <td class="mainbodyup"><img src="../../stylesheets/images/groupchat.png"/></td>
          </tr>
          <tr height="60%">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr height="20%">
            <td class="mainbodyup"><img src="../../stylesheets/images/recent.png"/></td>
            <td>&nbsp;</td>
            <td class="mainbodyup"><img src="../../stylesheets/images/search.png"/></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr height="10%">
      <td colspan="3" style="background:url(../../stylesheets/images/setting_footer.png) no-repeat; background-size: contain;border-top-style:solid;border-color: #129AA2; border:1">&nbsp;</td>
    </tr>
  </table>
</body>

CSS：

    @media only screen and (min-width: 768px) {
.mainbodyup
{
    height:20%;
    width:33%; 
    padding:0px;
}
.mainbodyup img
{
  max-width:30%;
  margin:auto;
  display:block;
}
}
@media only screen and (min-width: 100px) {
.mainbodyup
{
    height:20%;
    width:33%; 
    padding:0px;
}
.mainbodyup img
{
  max-width:100%;
  margin:auto;
  display:block;
}
}

稍后编辑

我将我的 CSS 更改为媒体查询。现在我面临的问题是最后一个媒体查询是有效的。如果我交换然后结果也是一样的。两个查询单独工作正常但是如果我把它们放在一起那么最后一个是有效的，那么问题是什么？

【问题讨论】：

mobile.smashingmagazine.com/2010/07/19/…

标签： html css mobile media-queries

【解决方案1】：

如果您想为每个平台（桌面和移动）保持相同的 HTML 和 CSS，您应该使用 CSS 媒体查询。你可以把它读成good start on the subject.

媒体查询如下所示：

@media only screen and (min-width: 720px) {
    .mainbodyup img
    {
        max-width:100%;
        margin:auto;
        display:block;
    }
}

这个想法是根据宽度选择 CSS 样式（这里我们使用min-width，但也有max-width）。一个好主意是以百分比表示您的尺寸，这样，它可以根据屏幕尺寸进行缩放。

或者你可以从一个响应式模板开始，然后在它的基础上进行构建，比如http://html5boilerplate.com/

【讨论】：

我用你的例子改变了它。我写了两个 diff.media 查询，但它需要最后一个。请参阅编辑的问题。

【解决方案2】：

您必须反过来使用您的媒体查询。首先，您的目标屏幕最小为 100 像素，然后是最小 768 像素。这样，后者将覆盖第一个

【讨论】：

那么解决方案是什么？我交换它们，但相同的结果最后一个覆盖它。
如果您互换它们，您将在屏幕大于 100 像素（手机）的设备上拥有 .mainbodyup img 100% 的最大宽度，并在大于 768 的屏幕（平板电脑/桌面）
问题是假设我删除了@media only screen and (min-width: 100px) 的css，那么另一个在桌面上可以正常工作，如果我删除@media only screen and (min-width: 768px)，那么另一个在移动设备上可以正常工作。但是如果两个查询都存在那么最后一个正在工作，那么解决方案是什么？
我刚刚在 Chrome 中尝试过，媒体查询工作得很好。你使用的是什么浏览器？如果您进一步降低桌面的最大宽度，您会看到更好的结果
chrome 也用firefox测试过，结果还是一样。