预期结果（Chrome）

Question

预期结果（Chrome）

我开发了一款适用于 Android Chrome 的移动网络应用。这是一个截图：

Safari的白色栏

现在我遇到了其他浏览器的问题。例如，iPhone 5上的 Safari iOS 8.3 会在右侧显示这个丑陋的纯白色列。阻止<body>占用整个视口的宽度并触发垂直滚动条：

带有Android默认浏览器

的空白页面

另一方面，大多数Android手机附带的“浏览器”应用程序不会显示顶部导航栏下方的内容：

Wiko Iggy 上的浏览器4.2.2 会出现这种情况，但 Internet 2.1.34.1 上的问题不存在< strong>三星Galaxy S4 （“浏览器”和“互联网”不同的应用程序是单独开发的吗？我不知道。）。

标记

以下是该应用的高级标记。我正在使用带有yeoman生成器的AngularJS和mobile-angular-ui作为UI库。

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="no">
    ...
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" media="(min-width: 641px)" href="styles/main.css">
    ...

    <link rel="stylesheet" media="(max-width: 640px)" href="styles/mobile/mainMobile.css">
    ...
    <!-- endbuild -->
  </head>
  <body ng-app="myApp" ng-controller="MainCtrl as MainCtrl">

    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div ng-view=""></div>
    <div ui-yield-to="modals"></div>

    <!-- build:js(.) scripts/oldieshim.js -->
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <![endif]-->
    <!-- endbuild -->

  </body>
</html>

CSS

html和body根本没有css样式。

我可以提供您认为与解决此问题相关的任何其他信息。我的首要任务是在iOS上解决问题。

Answer 1

您的网站可能出现问题viewport，body/html高度，甚至与＃34;未清除＆＃34; floats。

我建议逐个评论用户界面，这样您就可以轻松调试并找出问题所在。

Answer 2

我有同样的问题。

我遇到的问题是我页面上的元素的像素宽度大于页面的宽度。

与直觉相反，这导致页面上的其他元素的宽度应该是页面的100％，现在重新调整大小以扩展页面的整个宽度。我认为这是因为太宽的元素变为100％，其他应该100％的元素与超大元素成比例地变小。

示例：

元素太大：1000px
设备的显示为800px

...现在1000px的任何东西都会扩展整个长度，任何宽度都是100％;＆＃39;只会扩展80％的页面，因为800px是1000px的80％。 ......无论如何，这是我的理论......

我通过添加＆＃34; max-width：100％＆＃34;来解决这个问题。到所有设置像素宽度的元素：

.div-class{
     width:1366px;
     max-width:100%;
}

在iOS和Android“浏览器”上使用Safari渲染问题

预期结果（Chrome）

Safari的白色栏

带有Android默认浏览器

标记

CSS

2 个答案: