首页 文章

如何能够将100％宽度的<footer> / <header> / <div>与移动浏览器中的差异进行对抗？

提问于
浏览 次
1

在使用媒体查询将网站迁移到响应式html5之后，我发现我仍然无法使用移动iOS 7 safari浏览器以相同的宽度显示页脚/主页/ Headers 部分，尽管它们的css设置为显示：块和宽度：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％宽度元素更大 .

但我不知道用什么技术来解决这个问题 . - 我甚至无法通过移动设备检查代码以确定差异的原因 . - 在容器内设置css max-width到图像（例如max-width：100％）并不是更好 .

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

css mobile width mobile-safari viewport

8 回答

  • 0

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

    <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>

    问候

    回复于
  • 2

    font-size

    页脚列的顶部元素（ 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 不能有 margin . 如果您想为 table-cell 设置 margin s，则需要提供一个顶部元素 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一样 .

    回复于
  • 2

    有很多代码需要重做 .

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

    回复于
  • 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;
  }
    回复于
  • 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 属性控制用户如何放大或缩小页面 .

    回复于
  • 0

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

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

    @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进行移动浏览器测试 .

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

    回复于
  • 0

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

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

    回复于
  • 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();
    });
    回复于

相关问题