Fatal编程技术网
  • html/
  • Html iOS文本及；使用webkit溢出滚动时图像模糊：触摸

Html iOS文本及；使用webkit溢出滚动时图像模糊：触摸

html ios css ios5

Html iOS文本及；使用webkit溢出滚动时图像模糊：触摸,html,ios,css,ios5,mobile-safari,Html,Ios,Css,Ios5,Mobile Safari,webkit溢出滚动：触摸 这在滚动方面非常有效，但在应用了overflow:scroll的情况下，会明显模糊中的文本和图像。我用iOS5在3台不同的iPad上试用过 苹果自带的easing/bounce算法比任何JS等效算法都要好得多，所以我想开始使用这个新功能！我需要使用的字体更引人注目 以下是一个演示，您可以在带iOS5的iPad上尝试： [斯塔克，无网络工具包溢出滚动：触摸；] [模糊，webkit溢出滚动：触摸；]在iOS模拟器中似乎没有模糊。我可以理解为什么在使用webkit溢出滚动

webkit溢出滚动：触摸

这在滚动方面非常有效，但在应用了
overflow:scroll
的情况下，会明显模糊
中的文本和图像。我用iOS5在3台不同的iPad上试用过

苹果自带的easing/bounce算法比任何JS等效算法都要好得多，所以我想开始使用这个新功能！我需要使用的字体更引人注目

以下是一个演示，您可以在带iOS5的iPad上尝试：

[斯塔克，无网络工具包溢出滚动：触摸；]


[模糊，webkit溢出滚动：触摸；]
在iOS模拟器中似乎没有模糊。我可以理解为什么在使用
webkit溢出滚动时它会变得模糊，因为当涉及动量时，它需要以不同的方式呈现内容（至少我是这么认为的）


至于解决方案，你将不得不等待苹果公司来解决这个问题（如果它甚至影响到广大的读者）。
尝试将以下元标记添加到你页面的标题部分


<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = "no"/>



您看到的问题是由于ipad的默认缩放。Paul的回答是正确的，但也不必要地禁用了用户缩放。您只需要正确设置屏幕的初始比例和宽度


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />






对于我的测试用例，请尝试在ipad上打开以下两页：
（模糊）

（未模糊）
-webkit透视图：0

为我工作