カテゴリー別アーカイブ: Javascript

スマホでピンチアウトして拡大した時に、一撃でデフォルトサイズに戻す方法

コメントをどうぞ 
1
2
3
4
5
6
7
8
9
10
11
12
13

function resetScale(){
    var metalist = document.getElementsByTagName('meta');
    var target = 0;
    for(var i = 0; i < metalist.length; i++) {
        var name = metalist[i].getAttribute('name');
        if(name && name.toLowerCase() === 'viewport') {
            metalist[i].setAttribute('content', 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no');
            target = i;
            break;
        }
    }
    metalist[target].setAttribute('content', 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes');
}
 
function resetScale(){
	var metalist = document.getElementsByTagName('meta');
	var target = 0;
	for(var i = 0; i < metalist.length; i++) {
		var name = metalist[i].getAttribute('name');
		if(name && name.toLowerCase() === 'viewport') {
			metalist[i].setAttribute('content', 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no');
			target = i;
			break;
		}
	}
	metalist[target].setAttribute('content', 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes');
}

Androidで縦書きをぴったり画面サイズに合わせるJS

コメントをどうぞ

epubビューアーを作ろうと思って、縦書き表示をCSSで作ったのだけど、Androidで、1行が画面ピッタリに表示されない。
ロードされた段階で自動的に謎のサイズに拡大されている。1行が、横書きの時に収まるサイズで計算されている気がする。
CSSだけで頑張りたかったけど、うまくいかないので、JSで。

1
2
3
4
5
6
7
8
9
10

$(document).ready(function(){
    var chars = 40;//一行あたりの文字列
    var zoomer = document.body.clientWidth / window.innerWidth;
    var realHeight = $(window).height() / zoomer;
    var fontSize = realHeight/chars;
    $(".wrapper").height(realHeight);
    $(".wrapper").css("padding",(fontSize*1)+"px");
    $(".wrapper").css("font-size",fontSize+"px");
    $(window).scrollLeft(0);
});
 
$(document).ready(function(){
	var chars = 40;//一行あたりの文字列
	var zoomer = document.body.clientWidth / window.innerWidth;
	var realHeight = $(window).height() / zoomer;
	var fontSize = realHeight/chars;
	$(".wrapper").height(realHeight);
	$(".wrapper").css("padding",(fontSize*1)+"px");
	$(".wrapper").css("font-size",fontSize+"px");
	$(window).scrollLeft(0);
});