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

Responsive Fonts: Non-supportive Browsers

本文关键字：浏览器 不支持 字体 响应      更新时间：2023-09-26

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

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

通过根据屏幕分辨率减少/增加字体大小宽度，视口宽度对我的响应式网站非常有效！它适用于IE 10和Firefox 30。然而，对于不支持HTML5/CSS3的旧浏览器该怎么办呢？示例Safari 5不支持.vw font-size。我已插入.9em作为备份字体大小。适用于.vw字体大小，但不适用。我的网站的重点是成为一个反应灵敏的网站，包括字体。现在，我对响应式网站唯一的问题是字体。

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

也许这就是您想要的？

 <!-- 
  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/

如果浏览器不支持您尝试使用的东西，并且您无法解决它，那么是的，您应该检测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/

否则，只需回退到支持的东西

相关文章：