1

使用媒体查询将网站迁移到响应式 html5 后，我发现我仍然无法让移动 iOS 7 Safari 浏览器以相同的宽度显示页脚/主/页眉部分，尽管它们的 css 设置为 display:block 和宽度：100%。
例子：

http://i.imgur.com/QUxffNT.jpg

http://dev.shermanbrothers.com（用户名：devreview 密码：De3e3vfr4）[html5 更新到网站]

即使在旧版本的网站上也会出现类似的问题：

http://i.imgur.com/1sS4WRZ.jpg

http://shermanbrothers.com [旧版网站，基于表格布局，仍有类似问题]

现在，我有一些猜测 - 为什么 - 这发生在移动设备上，而不是在桌面浏览器的狭窄窗口上：

  • 一些块级元素，例如主/页眉和页脚之间的内容太多，甚至无法缩小到 100%
  • 或者也许在中间部分使用 display:table 可以让它比其他块和 100% 宽度的元素爆炸得更大。

但我不知道用什么技术来解决这个问题。- 我什至无法通过手机检查代码以确定差异的原因。- 为容器内的图像（例如 max-width:100% ）设置 css 最大宽度并不好。

那么如何调试和处理特定于移动设备的错误，尤其是移动设备宽度/布局问题？

4

8 回答 8

2

字体大小

页脚列 ( footer-flex) 的顶部元素有一个font-size: 10px. 并且子元素 ( .footer-block) 有一个font-size: 2em. 这意味着.footer-block元素具有font-size: 20px. (10px(顶部元素字体大小) * 2em) = 20px。这会导致页脚中出现大文本。

展示

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

因为table-cell就像td标签一样，table-cell不能有margins。如果您想拥有margins ，您table-cell需要提供一个display: table带有 style的顶部元素border-spacing。一个非常适合您的案例的示例：http: //jsfiddle.net/R3zDu/

如您所见，没有clear: both或float: blah定义和明确的 css 定义。

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

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

测试

我不认为有一个软件可以像手机一样呈现页面。另一方面，如果您在 iOS 中遇到问题，您可以查看您的 PC 或 Mac 中的 Safari 浏览器，它在大多数情况下（至少在您的情况下）与 iOS Safari 类似。

于 2013-11-19T16:32:31.507 回答
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以进行移动浏览器测试。

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

于 2013-11-20T18:39:15.357 回答
0

听起来您需要一个适合移动设备的<meta>标签。例子：

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

来自Mozilla 开发者网络的引述：

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

<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

于 2013-11-14T21:12:53.363 回答
0 
#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;
  }
于 2013-11-19T18:46:58.597 回答
0

有很多代码需要重做。

与其这么痛苦，我强烈建议您研究像bootstrap或foundation这样的框架。它们都提供了很好的模板示例来帮助您入门。他们的媒体查询也很有魅力，他们将帮助您减少大量的开发时间和一些令人头疼的问题。

于 2013-11-19T23:03:39.830 回答
0

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

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

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

这样，您不必做太多工作。该网站在移动设备上或多或少有点正常可见。我对您的代码进行了一些研究，但是如果您想正确执行它，则需要大量工作。

500px 对于移动设备来说还可以，但您可以将其调整为您喜欢的大小，它不如设备宽度好，但可以在您要做的大量工作和一般用户体验之间做出合理的折衷。只要您允许缩放（用户缩放）。

我建议的另一个技巧是在某些部分（例如您的品牌导航）上使字体在移动设备上稍大一点。并且表单元素总是最小 16 像素，因此当您聚焦某个字段时，您不会在 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>

问候

于 2013-11-20T21:33:11.723 回答
0

使用显示块和宽度为 100%，同时删除浮动和最大宽度、最小宽度属性。

由于您已经拥有视口元数据，因此您也可以仅使用浏览器模拟移动设备。只需调整浏览器的宽度。

于 2013-11-21T09:04:55.580 回答
0

我在 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();
    });
于 2013-11-21T17:14:52.403 回答