【コピペ追加でOK!】一発タブレット対応Java Script

2019-03-16 01:01

現在日本におけるのタブレット所有率は約30%となっています。
テーマにもよりますが、3人に1人はタブレット端末でwebサイトを閲覧している、ということですね。

今回は、PC/SPはスタイル調整済みのサイトを一発でタブレットも綺麗に見せることができるJava Scriptをご紹介します。

こちらのスクリプトはjQueryを読み込んでいることが前提ですので、jQueryの下に記述してください。(jQueryはこちらから)

 //スマホとタブレットでviewportを切替え
$(function(){
var ua = navigator.userAgent;
var window_width = $(window).width();
if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 && 670 <=window_width && window_width<=1100){
$('head meta[name="viewport"]').attr('content','width=1100');
}
});

<JS解説>
ua:ユーザーエージェント(ブラウザやデバイス種別)を取得
window_width:画面幅を取得

if文で「iPad」または「Android」、かつ画面幅670px〜1100pxの時、の条件指定をします。
if文内で、条件に合う時、<head>内を書き換えます。
<viewport content=”width=device-width, initial-scale=1, viewport-fit=cover”>

<viewport content=”width=1100″>
こうすることで指定条件下では常に仮想画面幅が1100pxとなり、PCデザインで画面に綺麗に収まってくれます。

<viewport content=”width=640″>と、するとタブレット環境でSPデザインを適用することができます。