Foundation utils 在 ie8 中不工作
Foundation utils is not working in ie8
我正在尝试在 IE8 中使用 Foundation.utils
,但我总是只在小的上得到 true,在其余的上得到 false,例如:
Foundation.utils.is_small_only() = true all the time
Foundation.utils.is_small_up() = false
当然不会出现上面的情况,如果只是小,那肯定是小了...
有什么解决办法吗?
基础 5 doesn't support IE 8 at all but you can try this.
Why doesn't Foundation support IE7 or IE8? Or: why we don't support a dying species.
This is probably the biggest question we get. Consider this: most of
today's popular browsers automatically upgrade themselves including
Chrome, Firefox and Explorer (starting with 9). IE 8 is the last IE
supported on Windows XP, which Microsoft will officially stop
supporting next year. That played a part in our decision.
Besides that, since Foundation 4, our framework is built mobile-first,
meaning it relies on media queries to layer in more complex layouts
and components. Browsers or devices that don't support media queries
will be restricted to a simple, single-column layout. In some ways,
Foundation 4 better supports IE6-7 insomuch as it provides a mobile
but not entirely broken experience. If IE8 support is important for
your users / customers, you can use Foundation 3.2, which supports
IE8. It's not mobile first but it's good stuff.
我已经编写了自己的解决方案来支持 ie8 中的实用程序。
我专门为我的使用构建了它(它可以做得更好,但为什么要付出努力?它只适用于 ie8..),我仍然相信你可以使用它,即使进行一些小的调整。
var win = $(window),
bodyFontSize = parseInt(body.css('fontSize'));
function matchMediaQuery(mediaQuery)
{
var winWidth = win.outerWidth(),
winHeight = win.outerHeight(),
mediaQuerySizes = mediaQuery.match(/\d+\.?\d*em/g);
if (mediaQuerySizes == null)
{
return true;
}
else
{
mediaQuery = mediaQuery.replace(/^(only screen)( and )?/,'').replace('min-width:',winWidth + '>=').replace('max-width:',winWidth + '<').replace('min-height:',winHeight + '>=').replace('max-height:',winHeight + '<').replace('orientation:landscape',winHeight + '>' + winWidth).replace(' and ',' && ').replace(' or ',' || ');
for (var i = 0, len = mediaQuerySizes.length; i < len; i++)
{
mediaQuery = mediaQuery.replace(mediaQuerySizes[i],parseInt(mediaQuerySizes[i])*bodyFontSize);
}
return eval(mediaQuery);
}
}
$.each(Foundation.media_queries, function(key, value)
{
eval('Foundation.utils.is_' + ((key.indexOf('-') > -1) ? key.replace('-','_') : key + '_up') + ' = function() { return matchMediaQuery("'+value+'"); }');
});
我正在尝试在 IE8 中使用 Foundation.utils
,但我总是只在小的上得到 true,在其余的上得到 false,例如:
Foundation.utils.is_small_only() = true all the time
Foundation.utils.is_small_up() = false
当然不会出现上面的情况,如果只是小,那肯定是小了...
有什么解决办法吗?
基础 5 doesn't support IE 8 at all but you can try this.
Why doesn't Foundation support IE7 or IE8? Or: why we don't support a dying species.
This is probably the biggest question we get. Consider this: most of today's popular browsers automatically upgrade themselves including Chrome, Firefox and Explorer (starting with 9). IE 8 is the last IE supported on Windows XP, which Microsoft will officially stop supporting next year. That played a part in our decision.
Besides that, since Foundation 4, our framework is built mobile-first, meaning it relies on media queries to layer in more complex layouts and components. Browsers or devices that don't support media queries will be restricted to a simple, single-column layout. In some ways, Foundation 4 better supports IE6-7 insomuch as it provides a mobile but not entirely broken experience. If IE8 support is important for your users / customers, you can use Foundation 3.2, which supports IE8. It's not mobile first but it's good stuff.
我已经编写了自己的解决方案来支持 ie8 中的实用程序。 我专门为我的使用构建了它(它可以做得更好,但为什么要付出努力?它只适用于 ie8..),我仍然相信你可以使用它,即使进行一些小的调整。
var win = $(window),
bodyFontSize = parseInt(body.css('fontSize'));
function matchMediaQuery(mediaQuery)
{
var winWidth = win.outerWidth(),
winHeight = win.outerHeight(),
mediaQuerySizes = mediaQuery.match(/\d+\.?\d*em/g);
if (mediaQuerySizes == null)
{
return true;
}
else
{
mediaQuery = mediaQuery.replace(/^(only screen)( and )?/,'').replace('min-width:',winWidth + '>=').replace('max-width:',winWidth + '<').replace('min-height:',winHeight + '>=').replace('max-height:',winHeight + '<').replace('orientation:landscape',winHeight + '>' + winWidth).replace(' and ',' && ').replace(' or ',' || ');
for (var i = 0, len = mediaQuerySizes.length; i < len; i++)
{
mediaQuery = mediaQuery.replace(mediaQuerySizes[i],parseInt(mediaQuerySizes[i])*bodyFontSize);
}
return eval(mediaQuery);
}
}
$.each(Foundation.media_queries, function(key, value)
{
eval('Foundation.utils.is_' + ((key.indexOf('-') > -1) ? key.replace('-','_') : key + '_up') + ' = function() { return matchMediaQuery("'+value+'"); }');
});