Cipta paparan zum adaptif pada telefon mudah alih dengan kemahiran JS_javascript

JS untuk mencipta paparan zum adaptif pada telefon mudah alih

Contoh 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>

Contoh 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>

Contoh 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">

Ringkasan:

1. Ia sebenarnya tidak sukar. Mula-mula, tambahkan barisan teg meta port pandang di kepala kod halaman web.

2. Jangan gunakan lebar mutlak Memandangkan halaman web akan melaraskan reka letak mengikut lebar skrin, anda tidak boleh menggunakan reka letak lebar mutlak, anda juga tidak boleh menggunakan elemen dengan lebar mutlak.

3. Fon bersaiz relatif tidak boleh menggunakan saiz mutlak (px), tetapi hanya saiz relatif (em).

4. Grid bendalir Maksud "grid bendalir" ialah kedudukan setiap bongkah terapung dan tidak tetap.

.utama { float: kanan; lebar: 70%; .leftBar { float: 25%;
5. Imej penyesuaian (imej cecair) Selain reka letak dan teks, "reka bentuk web penyesuaian" juga mesti melaksanakan penskalaan automatik imej.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.