javascript - UIWebView 中的错误 CSS 行为 : font-size is misinterpreted

标签 javascript ios css iphone uiwebview

我的应用程序包含一个 UIWebView,我想在其中通过按钮控制文本大小。

源 HTML 非常困惑,来自 HTML5 之前的时代。我设法编写了一个在 iPad 和 4 英寸 iPhone 和 iPod Touch 上运行良好但在 3.5 英寸设备上运行不佳的 JavaScript hack。

我正在通过 Safari 调试 HMTL(通过我刚刚发现的“开发”>“iPhone 模拟器”菜单),似乎 Safari Mobile 的 CSS 解释很奇怪。

这是 HTML 的摘录:

<html>  
  <head>        
    <meta id="viewport" name="viewport" content="width=device-width-20, initial-scale=0.8">
    <style type="text/css">
      ... some inline style...
    </style>
  </head>
  <body>
    ...
    <span style="font-size: 26px;">
      Bla bla bla
      ...
    </span>
    ...
  </body>
</html>

这是 Safari 网络检查器的 2 个屏幕截图:

第一个显示规则:

Safari Inspector Screenshot: CSS rules

第二个显示文本的显示方式:

Safari Inspector Screenshot: CSS Applied rules

如何解释 26px font-size 被忽略而显示 18px font-size?

最佳答案

问题似乎来自以下行:

<meta id="viewport" name="viewport" content="width=device-width-20, initial-scale=0.8">

device-width-20 不是可识别的标记(我认为编写它的开发人员的意思是 (device-width − 20px)。

事实证明,将这一行简化为以下内容对于 iOS 7 来说就足够了:

<meta id="viewport" name="viewport" content="width=initial-scale=1.0">

比照。 this doc有关 iOS 如何处理视口(viewport)的更多信息。

关于javascript - UIWebView 中的错误 CSS 行为 : font-size is misinterpreted,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22637814/

相关文章:

javascript - iPhone 上的 Three.js 项目 - 事件问题(选择&拖动对象)

ios - 打开ios拨号面板

ios - 用于 Firebase 的谷歌分析 : How to analyze events

html - 为什么 valign ="bottom"在 firefox 中不起作用,而在 IE 和 Chrome 中起作用?

html - Safari 表格定位(负边距)

javascript - 如何在启动 webdriver 实例之前通过命令行传递conf.js中的deviceName

javascript - 窗口宽度/高度的 Div 比例

javascript - 如何通过优雅降级淡入内容

javascript - 1个按钮 2个功能

objective-c - XCode - 显示/删除 NSDocumentDirectory 中的文件