6

编辑 2这个问题正在寻找一种平滑、干净的方式来重排iPhone 上的文本。

根据方向改进网络应用程序以具有 2 种不同的宽度（320 和 480）。目的还在于为非移动（即 > 480 宽度）屏幕提供 480 宽。除了横向刷新页面时，它基本上可以按需要工作。这会导致布局回到 320（左侧）并在右侧留下一个黑条。

  • 纵向加载

1.人像（加载后）

  • 旋转到横向

2.横向（旋转后）

  • 在风景中刷新

3.横向（刷新后）

它需要旋转到纵向并返回才能再次调整大小和图像 2。这对我来说是一个可用性问题。页面在 Android 上调整大小和旋转效果很好，在桌面上是“全尺寸”。

有人知道我错过了什么吗？我已经尝试了很多次迭代并阅读了一些错误解决方案。这些想法都没有改变结果。即将提交错误报告。我有一种预感，它在媒体查询#container 的行中。

编辑：该网站是为移动设备（320 宽）构建的。希望在空间可用时扩大空间的使用。主要目的是让文本和元素重排。 查看照片，注意输入字段与其标签的对齐方式。

我尝试了两种方法来完成这项工作。其他是使用 javascript 更改#container 宽度。目前在内联样式表末尾使用以下媒体查询。我更喜欢通过媒体查询来解决这个问题。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>The Title</title>
    <style type="text/css">
        html {
            margin: 0;
            padding: 0;
        }
        body {
            font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
        }
        #container {
            margin: auto;
            width: 480px;
         .....
        @media screen and (max-width: 480px) {
            body {
                -webkit-text-size-adjust: none;
            }
            #container {
                 max-width: 480px !important;
                 width: 100% !important;
            }       
        }
        @media screen and (max-width: 320px) {
            body {
                -webkit-text-size-adjust: none;
            }
            #container {
                 max-width: 320px !important;
                 width: 100% !important;
            }       
        }
    </style>
      .....
4

1 回答 1

5

取得了突破。在媒体查询的几十种变化之后，这段代码“打破”了这个问题：

function orientation_change() {
    if (window.orientation == 0 || window.orientation == 180)
        document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");
    else if (window.orientation == -90 || window.orientation == 90)
        document.getElementById("viewport").setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");     
}

和：

<body onload="orientation_change();" onorientationchange="orientation_change();">

仍然包含原始问题的媒体查询以在发生旋转时重排文本。但是刷新部分黑屏问题消失了。发现有关Apple iOS Safari Web 内容指南的见解。特别是，处理方向事件。

我希望这有助于响应式网页设计的过程。

于 2012-06-11T17:20:35.750 回答