リキットでないレスポンシブサイトをタブレットなどで表示すると
画面の右側が切れてしまう場合がある。

例えばこんな場合の時
・ブレイクポイントは640px
・PC版のコンテンツ幅は1000px
・PC版はリキットレイアウトではない。

これを画面サイズ768pxのタブレット端末で表示した場合、こんな感じになる。

これはサイトのコンテンツ幅がdevice-widthより大きい場合に発生する。
ピンチで縮小すれば問題なくフィットして見れるけど
どうせなら表示した際にデフォルトで画面にフィットさせたい。

jsやらphpやらで読み込んだ端末ごとにviewportを動的に書ればいいかと思ったけど
Androidだとviewportのwidth指定が効かない端末もあるらしく却下。

じゃあ無理矢理CSSでズームさせりゃいいやって事で↓こうする。

$(function() {
	var agent = navigator.userAgent;
	var contentWidth = 1000; //コンテンツ幅
	var breakPoint = 641; //ブレイクポイント

	if((agent.search(/iPhone/) != -1)||(agent.search(/iPad/) != -1)||(agent.search(/Android/) != -1)){
		var windowWidth = $(window).width();	
		if((windowWidth <= contentWidth)&&(windowWidth >=breakPoint)){		
	        zoom = (windowWidth / contentWidth)*100;
	        $('body').css('zoom',zoom+'%');
		}
	}
});

iPhone・iPad・Androidで且つ画面サイズが641～1000pxの場合
画面幅にフィットする倍率にCSSでズームさせる。

jQuery

• 
• Tweet