html - Iphone 4/5 上的 Safari 显示百分比不正确

Question

所以我正在研究响应式设计，当我注意到苹果手机上的问题时，我以为我快到了。 This是链接，您可能可以看到它在 android 上的外观，一切正常，但在 iphone 上是一个完全不同的故事。我无意中注意到了这一点，我正在和一个 friend 聊天，我想向他展示我的元素(他有一部 iphone 5)，然后当页面加载时我觉得有点愚蠢。问题是我没有办法模拟，只能问我的 friend ，而且我并不总是和他们在一起，所以这有点困难。它不适用于 chrome 的开发人员工具包，因为它没有显示该问题。

我在网上冲浪，认为这可能是关于 safari 回合的问题 小数点。因此，我们将不胜感激。

Answer 1

.header__inner > *, .add_friend, .more__info, .show__notifications { float:left; }

这是我添加的..因为在 Safari < 7 中忽略了 flex-wrap，我将元素 float 到左侧(选择器 > * 表示选择器的直接子级)。

您不必做最后的润色，您将在 Safari < 7 中可用。

编辑:带版本的浏览器检测(无法确定是否完美，但快速测试给出了 safari 上的 safari、chrome 上的 chrome、firefox 上的 firefox 以及 IE 上的 MSIE 和 IE

function get_browser_info(){
    var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 
    if(/trident/i.test(M[1])){
        tem=/\brv[ :]+(\d+)/g.exec(ua) || []; 
        return {name:'IE',version:(tem[1]||'')};
        }   
    if(M[1]==='Chrome'){
        tem=ua.match(/\bOPR\/(\d+)/)
        if(tem!=null)   {return {name:'Opera', version:tem[1]};}
        }   
    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
    return {
      name: M[0],
      version: M[1]
    };
 }

var browser=get_browser_info();
alert(browser.name);