JS_javascript スキルを使用して携帯電話でアダプティブ ズーム ディスプレイを作成する

携帯電話で適応ズーム表示を作成する JS

例 1:

<script>
var _width = parseInt(window.screen.width);
var scale = _width/640;
var ua = navigator.userAgent.toLowerCase();
var result = /android (\d+\.\d+)/.exec(ua);
if (result){
var version = parseFloat(result[1]);
if(version>2.3){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+scale+', maximum-scale = '+scale+', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>

例 2:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
 if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
  var viewportmeta = document.querySelector('meta[name="viewport"]');
   if (viewportmeta) {
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
  document.addEventListener('touchstart', function () {
   viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=0.25, maximum-scale=1.6';
  }, false);
   document.addEventListener('orientationchange', function () {
   viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
  }, false);
   }
  }
});
</script>

例 3:

<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

概要:

1. 実は難しいことではありません。 まず、Web ページのコードの先頭にビューポート メタ タグの行を追加します。

2. 絶対幅を使用しない Web ページは画面幅に応じてレイアウトを調整するため、絶対幅のレイアウトや絶対幅の要素を使用することはできません。

3. 相対サイズのフォント。フォントは絶対サイズ (px) を使用できません。相対サイズ (em) のみを使用できます。

4. 流体グリッド 「流体グリッド」の意味は、各ブロックの位置が固定されておらず、浮遊していることです。

.main { 浮動小数点: 右; 幅: 70%; } .leftBar { 浮動小数点: 左幅: 25%;
5. アダプティブ画像 (流動的な画像) 「アダプティブ Web デザイン」では、レイアウトとテキストに加えて、画像の自動スケーリングも実装する必要があります。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。