gpt4 book ai didi

iphone - Mobile Safari 重排而不调整大小 - 错误行为

转载 作者:行者123 更新时间:2023-12-03 18:45:06 25 4
gpt4 key购买 nike

编辑 2 这个问题正在寻找一种在 iPhone 上重排文本的流畅、干净的方法。

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

  • 纵向加载

1. Portrait (after load)

  • 旋转为横向

2. Landscape (after rotate)

  • 刷新景观

3. Landscape (after refresh)

需要旋转到纵向再返回才能重新调整大小和图像 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 的见解。特别是处理定向事件。

我希望这对响应式网页设计过程有所帮助。

关于iphone - Mobile Safari 重排而不调整大小 - 错误行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10973649/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com