これは何? †

↑

ViewPort? を Javascript から変更する †

↑

調査結果 †

↑

A.単純書き換え †

https://github.com/kagyuu/ViewPortExam/blob/master/simple1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />
    <title>viewport size example</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
   
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
    
  var ctx = canvas.getContext('2d');
  
  for (x = 0; x <= canvas.width; x+=20) {
    for (y = 0; y <= canvas.height; y+=20) {
        
      if (x % 100 === 0 || y % 100 === 0) {
        ctx.save();
        ctx.fillStyle = 'red';
        ctx.fillRect(x,y,5,5);
        ctx.restore();
      } else {
        ctx.save();
        ctx.fillStyle = 'lightgreen';
        ctx.fillRect(x,y,5,5);
        ctx.restore();
      }
    }
  }
  
  ctx.strokeRect(0, 0, 100, 100);
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  
  ctx.font = '10pt monospace';
  ctx.fillText('100px', 30, 115);

  ctx.translate(110, 0);
  ctx.rotate(0.5 * Math.PI);
  ctx.fillText('100px', 30, 0);
    
  ctx.restore();
}
 
function rewind() {
    // 元通り、最大 5.0 倍。拡大可能にする
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1');
}
function expand() {
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=2.0, maximum-scale=5.0, user-scalable=1');
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
  	Simple rewrite view port<br/>
    <button onclick="rewind()">rewind</button>
    <button onclick="expand()">expand</button><br/><br/>
    <canvas id="canvassample" width="300" height="400"></canvas>
  </body>
</html>

↑

B.時間差書き換え †

https://github.com/kagyuu/ViewPortExam/blob/master/simple2.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />
    <title>viewport size example</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
   
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
    
  var ctx = canvas.getContext('2d');
  
  for (x = 0; x <= canvas.width; x+=20) {
    for (y = 0; y <= canvas.height; y+=20) {
        
      if (x % 100 === 0 || y % 100 === 0) {
        ctx.save();
        ctx.fillStyle = 'red';
        ctx.fillRect(x,y,5,5);
        ctx.restore();
      } else {
        ctx.save();
        ctx.fillStyle = 'lightgreen';
        ctx.fillRect(x,y,5,5);
        ctx.restore();
      }
    }
  }
  
  ctx.strokeRect(0, 0, 100, 100);
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  
  ctx.font = '10pt monospace';
  ctx.fillText('100px', 30, 115);

  ctx.translate(110, 0);
  ctx.rotate(0.5 * Math.PI);
  ctx.fillText('100px', 30, 0);
    
  ctx.restore();
}
 
function rewind() {
	// 1.0 倍にする
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
    
    // 100ms 後に、元通り最大 5.0 倍。拡大可能にする
    setTimeout(function(){
        var viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1');
    },100);    
}
function expand() {
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=2.0, maximum-scale=5.0, user-scalable=1');
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
  	Rewrite viewport with using setTimeout<br/>
    <button onclick="rewind()">rewind</button>
    <button onclick="expand()">expand</button><br/><br/>
    <canvas id="canvassample" width="300" height="400"></canvas>
  </body>
</html>

↑

C.metaタグ削除 †

https://github.com/kagyuu/ViewPortExam/blob/master/simple3.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />
    <title>viewport size example</title>
    <style>
    </style>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
   
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
    
  var ctx = canvas.getContext('2d');
  
  for (x = 0; x <= canvas.width; x+=20) {
    for (y = 0; y <= canvas.height; y+=20) {
        
      if (x % 100 === 0 || y % 100 === 0) {
        ctx.save();
        ctx.fillStyle = 'red';
        ctx.fillRect(x,y,5,5);
        ctx.restore();
      } else {
        ctx.save();
        ctx.fillStyle = 'lightgreen';
        ctx.fillRect(x,y,5,5);
        ctx.restore();
      }
    }
  }
  
  ctx.strokeRect(0, 0, 100, 100);
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  
  ctx.font = '10pt monospace';
  ctx.fillText('100px', 30, 115);

  ctx.translate(110, 0);
  ctx.rotate(0.5 * Math.PI);
  ctx.fillText('100px', 30, 0);
    
  ctx.restore();
}
 
function rewind() {
	// viewport を削除する
    var viewport = document.querySelector("meta[name=viewport]");
    //viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
    if (viewport) {
	    var head = document.getElementsByTagName('head')[0];
    	head.removeChild(viewport);
    }
    
    // 100ms 後に、元通り最大 5.0 倍。拡大可能にする
    setTimeout(function(){
		var newViewport=document.createElement('meta');
		newViewport.setAttribute('name','viewport');
		newViewport.setAttribute('content','width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1');
		head.appendChild(newViewport);
     },100);    
}
function expand() {
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=2.0, maximum-scale=5.0, user-scalable=1');
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
  	Delete viewport and set again<br/>
    <button onclick="rewind()">rewind</button>
    <button onclick="expand()">expand</button><br/><br/>
    <canvas id="canvassample" width="300" height="400"></canvas>
  </body>
</html>

↑

D.ボタンクリックイベント発行 †

https://github.com/kagyuu/ViewPortExam/blob/master/simple4.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />
    <title>viewport size example</title>
    <style>
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
  draw();
}
   
function draw() {
  var canvas = document.getElementById('canvassample');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
    
  var ctx = canvas.getContext('2d');
  
  for (x = 0; x <= canvas.width; x+=20) {
    for (y = 0; y <= canvas.height; y+=20) {
        
      if (x % 100 === 0 || y % 100 === 0) {
        ctx.save();
        ctx.fillStyle = 'red';
        ctx.fillRect(x,y,5,5);
        ctx.restore();
      } else {
        ctx.save();
        ctx.fillStyle = 'lightgreen';
        ctx.fillRect(x,y,5,5);
        ctx.restore();
      }
    }
  }
  
  ctx.strokeRect(0, 0, 100, 100);
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  
  ctx.font = '10pt monospace';
  ctx.fillText('100px', 30, 115);

  ctx.translate(110, 0);
  ctx.rotate(0.5 * Math.PI);
  ctx.fillText('100px', 30, 0);
    
  ctx.restore();
}
 
function rewind() {
	$('#btnExpand').trigger('click');
    
    // 100ms 後に、元通り最大 5.0 倍。拡大可能にする
    setTimeout(function(){
        var viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1');
     },1000);    
}
function expand() {
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=2.0, maximum-scale=5.0, user-scalable=1');
}
/* ==================== SCRIPTS ==================== */
</script>
  </head>
  <body>
  	occur button click event<br/>
    <button onclick="rewind()">rewind</button>
    <button onclick="expand()">expand</button><br/><br/>
    <canvas id="canvassample" width="300" height="400"></canvas>
  </body>
</html>

↑

より実践的な例 †

HTML

添付ファイル: fileshare.png 2557件 [詳細] filesc6.png 2521件 [詳細] filesc5.png 2499件 [詳細] filesc4.png 2459件 [詳細] filesc3.png 2521件 [詳細] filesc2.png 2627件 [詳細] filesc1.png 2567件 [詳細] fileiphone2.png 1553件 [詳細] fileiphone1.png 1595件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2015-03-29 (日) 18:17:43 (3869d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=db467e9c46
ISBN10
ISBN13
9784061426061