レスポンシブでposition:fixedを使った時にはまったこと

レスポンシブで「position:fixed」を使用した際に、表示がおかしくなって対応に困りました。
一部タブレットで回転させた後にposition:fixedを指定したheaderがずれるというもの。
こちらのタブレットではその現象が起きない上、さらに対処方法を記載されているサイトもなくて、焦りました。
無事に解決できたので、似たような現象でお困りの方へ。

jQuery Mobileを使う

最終的にはここに落ち着きました。
jQuery Mobileを使うのは初めてだったので、今回はposition:fixedを指定した箇所がずれないようにという目的にだけ使用しています。
1.jQuery Mobileのサイトへアクセス。ダウンロード：https://jquerymobile.com/
2.必要なデータをダウンロードする。
ページの下の方に「widgets」という項目があるので、そこまで移動して、下記3つにチェックを入れて、ページの一番下の「Build My Download」をクリック。
・Toolbars: Fixed
・Toolbars: Fixed: Workarounds
・Toolbars: Fixed
3.ダウンロードしたデータをサーバーへアップロード。
4.headerにjsファイルの読込。wordpress使用時で全ページに読み込ませたい場合は、「functions.php」に下記のコードを書き足せばOK。

// javascriptの読込
if (!is_admin()) {
	function register_script(){
		wp_register_script('jmobilejs', get_bloginfo('template_directory').'/js/jquery.mobile.custom.js');
	}
	function add_script() {
		register_script();
			wp_enqueue_script('jmobilejs');
	}
	add_action('wp_print_scripts', 'add_script');
}

※パスは適宜変更してくださいね。上記はテンプレートフォルダ内の「js」フォルダにアップロードした場合のパスになっています。

これだけで妙なずれはなくなりました。機種毎に表示が異なるので、年々対応が難しくなってきていると思います。
googleがモバイルフレンドリーの発表したため、これから先ますますレスポンシブの需要は高まると思われます。
頑張っていきましょう！