显示

您正在使用float并排排列元素，这是一种非常糟糕的做法。如果您想正确对齐元素，则应选择display: table-cell或display: inline-block。差异为table-cell就像<td>标记一样。这意味着所有连续元素具有相同的height。

由于table-cell的行为与td标记相同，table-cell无法margin。如果您希望为margin提供table-cell，则需要提供带display: table样式border-spacing的顶级元素。一个非常适合您案例的示例：http://jsfiddle.net/R3zDu/

正如您所看到的，没有clear: both或float: blah定义和明确的CSS定义。

这并不意味着“不再使用float”。 float的主要目的是将图像与文本/段落对齐。

清除所有float和clear: both样式。
应用table-cell方法。

测试

我认为没有一种软件可以像移动电话一样呈现页面。另一方面，如果您在iOS中遇到问题，可以查看PC或Mac中的Safari浏览器，在大多数情况下（至少在您的情况下）就像iOS Safari一样。

Answer 2

这些表格对于诊断此问题非常头疼，因为需要查看大量标记。但是，表格不是你的布局破坏的原因（至少不是我遇到这个问题时看到的标记）。您的问题是图像，文本和表格列上有这么多固定宽度。

要解决此问题，您必须在媒体查询中设置断点。对于图像来说是这样的：

@media (min-width: Whatever is the smallest screen size the image will not break your layout) and (max-width: 1 pixel below the previous size where the image was so wide it broke your layout) {
    .header-image {
        width: whatever is the widest width that keeps it from breaking your layout; // This will change with smaller queries
        height: auto;
    }
}

对于你的字体来说是这样的：

@media (min-width: Whatever is the smallest size the font will not break your layout) and (max-width: 1 pixel below the previous size where the font was so wide it broke your layout) {
    .navbar-font {
        font-size: whatever is the biggest font size that keeps the font from breaking your layout;

    }
}

或者对于你的字体，你可以告诉他们在屏幕变小时换行，但是你必须在它们包裹时考虑它们的高度：

.navbar-font {
    white-space: pre-wrap;
}

执行与上述类似的操作，以允许表格列的宽度也正确调整大小。

另外，请按照@TylerEich的建议并配置您的视口。

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

http://developer.android.com/guide/webapps/best-practices.html

最后，请查看BrowserStack进行移动浏览器测试。

这可能无法解决您的所有布局问题，但它修复了我发现的最大问题。基于表格的布局很难处理。祝你好运：）

Answer 3

听起来您需要适合移动设备的<meta>代码。例如：

<meta name="viewport" content="width=device-width, user-scalable=no">

来自Mozilla Developer Network：

的引用

典型的移动设备优化网站包含以下内容：

<meta name="viewport" content="width=device-width, user-scalable=no">

width属性控制视口的大小。它可以设置为特定数量的像素（如width=600）或特殊值device-width值，这是CSS像素中屏幕的宽度，比例为100％。（对应的height和device-height值可能对包含根据视口高度更改大小或位置的元素的页面有用。）

initial-scale属性控制首次加载页面时的缩放级别。 maximum-scale，minimum-scale和user-scalable属性控制用户如何放大或缩小页面。

Answer 4

#head{
  float:left;
  width:100%;
}

  #content_head{
    display:table;
    margin:0 auto;
  }

#body{
  float:left;
  width:100%;
}

  #content_body{
    display:table;
    margin:0 auto;
  }

#footer{
  float:left;
  width:100%;
}

  #content_footer{
    display:table;
    margin:0 auto;
  }

Answer 5

有很多代码需要重做。

我强烈建议您研究bootstrap或foundation等框架，而不是这种痛苦。它们都提供了很好的模板示例来帮助您入门。他们的媒体查询也像一个魅力，它们将帮助你减少大量的开发时间和一些头痛。

Answer 6

如果我是你，并且不想进行全面检修，我建议你设置：

<meta name="viewport" content="width=500px" />

尝试修复浮出500px宽度的东西（如导航）。

这样，您不必做太多工作。该网站在移动设备上或多或少有点正常可见。我对你的代码进行了一些研究，但是如果你想做正确的话，那就很好了。

对于移动设备来说，500px有点好，但你可以根据自己喜欢的方式进行调整，它不如设备宽度好，但是在你的工作量和一般用户体验之间给你一个公平的妥协。只要您允许缩放（用户缩放）。

我建议的另一个技巧是在某些部件上使字体在移动设备上稍微大一点，比如你的品牌导航。并且表单元素总是最小16px，因此当您聚焦字段时，不能在iPhone上进行缩放。

@media all and (max-width: 767px) {
    .brand-name-td{
        font-size:1em;
    }
    input[type="text"],select,textarea{
        font-size:16px;
    }
}

此外，什么是方便和改善用户体验，有些部分你只想隐藏在手机上，使用它：

@media all and (max-width: 767px) {
    .hide-mobile{
        display:none;
    }
}

当你想要隐藏一些元素时，添加类（如果有更多类，则除以空格）

 <td class="right-side-nav-container hide-mobile">...</td>

此致

Answer 7

使用diplay块和宽度为100％，同时删除float和max-width，min-width属性。

此外，您只需使用浏览器即可模拟移动设备，因为您已拥有视口元数据。只需调整浏览器的宽度即可。

Answer 8

在浏览firebug中的一些随机网站时，我选择了这个方便的小修补程序，看起来就像你在描述的那样，为什么不试一试，看看它是否有效：P

    $(function(){
    // IPad/IPhone
    var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
    ua = navigator.userAgent,

    gestureStart = function () {
        viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
    },

    scaleFix = function () {
        if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua)) {
        viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
        document.addEventListener("gesturestart", gestureStart, false);
        }
    };
    scaleFix();
    });

100％宽度的<footer> / <header> / <div>如何在移动浏览器中出现差异？</div> </header> </footer>

8 个答案:

字体大小

显示

测试

来自Mozilla Developer Network：