编辑2 这个问题正在寻找一种平滑，干净的方法来在iPhone上重排文本。
改进Web应用程序以使其具有2种不同的宽度(320和480)，具体取决于方向。目的还在于对于非移动屏幕(即> 480宽度)，可以使用480宽的屏幕。除页面横向刷新外，它大部分都可以按需工作。这将使布局返回到320(在左侧)，并在右侧留下一个黑条。
它需要旋转至纵向并返回以重新调整大小并重新获得图像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>
.....
最佳答案
取得了突破。在媒体查询中进行了数十种变化之后，此代码已“破解”了该问题:
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 Content Guide的洞察力。特别是处理定向事件。
我希望这有助于响应式Web设计的过程。