没有调整大小的移动Safari回流 - 错误行为
Dav*_*vid 6 iphone mobile-safari ios5
编辑2这个问题是寻找一种流畅,干净的方式来重排iPhone上的文字.
根据方向改进Web应用程序以具有2种不同的宽度(320和480).目的还在于为非移动(即> 480宽度)屏幕提供480宽度.除了在横向刷新页面时,它主要按照需要工作.这会导致布局返回到320(在左侧)并在右侧留下一个暗条.
- 以纵向加载
- 旋转到风景
- 在景观中刷新
它需要旋转到纵向和后退以再次调整大小和图像2.这对我来说是一个可用性问题.该页面在Android上调整大小并旋转,在桌面上是"全尺寸".
谁知道我错过了什么？我尝试了很多迭代,并阅读了几个bug解决方案.这些想法都没有改变结果.即将提交bug报告.我有一种预感,就是媒体查询#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内容指南.特别是处理方向事件.
我希望这有助于响应式网页设计的过程.