7

ブラウザがサポートしているかどうかを検出するための信頼できる方法はありますposition fixedか？

私はいくつかの解決策を見つけましたが、それらのどれもすべてのブラウザでうまく機能しないようです。

4

5 に答える 5

9

jQuery Mobileを使用してモバイルアプリケーションを開発しているときに、同じ問題が発生しました。ヘッダーの位置は固定されている必要があり（ブラウザーでサポートされている場合）、解決策はposition: fixed、cssのデフォルトでヘッダーを設定し、次の方法でサポートされているプロパティを確認することでした。

function isPositionFixedSupported() {
    return $( '[data-role="header"]' ).css( 'position' ) === 'fixed';
}

戻り値はstatic、ブラウザでサポートされていない場合です。

于 2012-09-12T17:46:28.847 に答える
3

このコードは完全に正常に機能します。IE6を搭載したWindowsMEボックスでテストしたところ、IE6はをサポートしていないため、「null」が返されますposition:fixed;。

ちなみに、これはもともと私のコードではありません。すべてのクレジットは、 ブラウザの機能をテストするための多くの機能を備えたKangaxのGithubに割り当てられます。 

function () {
  var container = document.body;
  if (document.createElement &&
  container && container.appendChild && container.removeChild) {
    var el = document.createElement("div");
    if (!el.getBoundingClientRect) {
      return null;
    }
    el.innerHTML = "x";
    el.style.cssText = "position:fixed;top:100px;";
    container.appendChild(el);
    var originalHeight = container.style.height, originalScrollTop = container.scrollTop;
    container.style.height = "3000px";
    container.scrollTop = 500;
    var elementTop = el.getBoundingClientRect().top;
    container.style.height = originalHeight;
    var isSupported = elementTop === 100;
    container.removeChild(el);
    container.scrollTop = originalScrollTop;
    return isSupported;
  }
  return null;
}

実行された場合は機能し、機能しなかった場合はnullを取得します。

于 2012-06-22T14:36:47.230 に答える
2 
var supportFixed = (function () {
    var elem = document.createElement('div');
    elem.style.cssText = 'position:fixed';
    if (elem.style.position.match('fixed')) return true;
    return false;
}());
于 2013-07-02T09:07:56.760 に答える
1

このようなものはモバイルブラウザで機能しますか？

function isFixedPositionSupported() {
   var e = document.createElement('div')
   try {
      e.style.position = 'fixed'
      return e.style.position == 'fixed'
   } catch (exception) {
      return false
   }
}
于 2012-06-25T11:14:01.073 に答える
-1

Ohgodwhyのコードは正しいですが、iOSの場合、ユーザーエージェントをチェックして、それがiOSSafariであるかどうかを確認できます。次に、サポートされていることを返します。ユーザーエージェントの文字列は

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like    Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7

これをコーディングする方法はわかりませんが、iOSを検出するためにこれを行う必要があると確信しています。

于 2012-06-22T15:35:47.157 に答える