Question

在我的网站上，我使用以下css font-size：

#block-menu .menu {
font-size:.9vw

}

视口宽度适用于我的响应式网站，可根据屏幕分辨率降低/增加字体大小宽度！它在IE 10和Firefox 30中运行良好。但是，如何处理不支持HTML5/CSS3的旧浏览器？示例Safari 5不支持.vw font-size。我已插入.9em作为备份字体大小。有效，但不像.vw font-size那样有效。我的网站的目的是成为一个响应式网站，包括字体。现在，我在响应式网站上遇到的唯一问题是字体。

以下是有关自适应字体的问题。 - 如果网络浏览器不符合HTML5/CSS3，我是否使用类似modernize.js的内容来提醒访问者他们必须升级浏览器？ - 对于不支持HTML/CSS的浏览器，是否只使用HTML5/CSS3友好的字体大小？ - 我还有其他选择吗？

Answer 1

也许这就是你要找的东西？

 <!-- 
  This is the base buggyfill. 
 -->
<script src="path/to/viewport-units-buggyfill.js"></script>

<!--
  This is the hacks plugin needed for behaviorHacks to work correctly 
  (see below).
 -->
<script src="path/to/viewport-units-buggyfill.hacks.js"></script>
<script>window.viewportUnitsBuggyfill.init({

// milliseconds to delay between updates of viewport-units
// caused by orientationchange, pageshow, resize events
refreshDebounceWait: 250,

// IE9, IE10 workaround for viewport units allowing vmin/vmax.
behaviorHack: true,

// IE9, IE10 workaround for viewport units allowing Safari for iOS <=
// use vmax.
contentHack: true,

// provide hacks plugin to make the behaviorHack property work correctly.
hacks: window.viewportUnitsBuggyfillHacks

});</script>

来源： http://www.useragentman.com/blog/2014/09/24/fixing-cross-browser-issues-with-css3-viewport-units-in-ie9-and-safari-for-ios/

Answer 2

如果浏览器不支持您尝试使用的内容而您无法解决问题，那么您应该检测到useragent字符串并提醒用户他们的浏览器不受支持。

移动浏览器示例：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
alert("Not supported"); // or other prettier alert    
}

以下是浏览器的UserAgent字符串列表： http://www.useragentstring.com/pages/All/

否则只是回到支持的东西

响应字体：不支持的浏览器

2 个答案: