iPhone 3GS 上的标题显示错误

Posted 2023-03-11

技术标签:

【中文标题】iPhone 3GS 上的标题显示错误【英文标题】：Bad header display on iPhone 3GS 【发布时间】：2016-12-29 07:35:03 【问题描述】：

我正在将此代码用于我的网站标题：

<!DOCYTYPE>
<html>
<head>
<style>
#image_header   
    border-radius:20px;
    user-drag:none;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    height:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);

#header_image   
    width:100%;
    height:150px;
    overflow:hidden;
    position:relative;
    border-radius:30px;

</style>
</head>
<body>
<div id="header_image"><a href="/"><img id="image_header" src="http://static.adzerk.net/Advertisers/78e105390cf2426896c5fc38ae85a4f6.png"></a></div>
</body>
</html>

当浏览器窗口小于图像时，该代码会在左右两侧切割标题图像。

我在多个设备和系统上对其进行了测试，效果非常好。

在运行可能的最新版本 6.1.6 的 iPhone 3GS 上只有一个糟糕的显示。看起来是这样的：

有人知道为什么会这样吗？我该如何解决？

【问题讨论】：

不知道还有没有人真正用过3GS 我去，但是修好了会更好。 【参考方案1】：

问题可能在于使用 CSS 的转换。你可以在这里查看： http://caniuse.com/#feat=transforms2d

因为它是 3Gs iPhone，我想你确实检查了你的浏览器的支持。

请尝试添加前缀 -webkit-transform: translateX(-50%) 否则更改使用 position 进行 transformationbackground-position: center;

【讨论】：

谢谢，它正在工作。是不是也有-moz-transform-???或-ms-transform-???…的支持范围更大？是的，尝试在您的构建中使用“autoprefixer”。如果您使用网站caniuse.com/#feat=transforms2d，请使用“SHOW ALL”展开所有浏览器。对于特定的旧浏览器，它标有前缀“-ms-，-moz-”。如果您使用 gulp/grunt 等构建的 CSS，请选择使用“autoprefixer”。谢谢，仅供参考。我还将此添加到我的代码中：-webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); -moz-transform:translateX(-50%);.

以上是关于iPhone 3GS 上的标题显示错误的主要内容，如果未能解决你的问题，请参考以下文章

调试 iPhone 3GS xcode 4.2.1

iPhone 3GS 上的 HTML5 WebSocket

如何使用 UIImagePickerController 类只显示 iPhone 3GS 的录像机

iPhone 4S 与 iPhone 3GS 中的 UILabel

iPhone 3GS + / iPad 1 + 最大硬件音频采样率