Question

编辑2 此问题正在寻找一种流畅，干净的方式来解决iPhone上的重排文字。

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

纵向加载

1. Portrait (after load)

旋转至风景

2. Landscape (after rotate)

在风景中刷新

3. Landscape (after refresh)

它需要旋转到纵向和后退以再次调整大小和图像2。这对我来说是一个可用性问题。页面调整大小＆amp;在Android上旋转很棒，在桌面上是“全尺寸”。

谁知道我错过了什么？我尝试了很多迭代，并阅读了几个bug解决方案。这些想法都没有改变结果。即将提交bug报告。我有一种预感，就是媒体查询#container。

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

我尝试了两种方法来完成这项工作。其他是使用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>
      .....

Answer 1

取得了突破。在媒体查询中有数十种变体之后，这段代码已经“破坏”了这个问题：

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();">

当发生轮换时，原始问题的媒体查询仍包含在 reflow 文本中。但是，刷新部分黑屏问题已经消失。找到了对Apple iOS Safari Web Content Guide的见解。特别是处理方向事件。

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

没有调整大小的移动Safari回流 - 错误行为

1 个答案: