Heim > Web-Frontend > js-Tutorial > Erstellen Sie eine adaptive Zoomanzeige auf Mobiltelefonen mit JS_Javascript-Kenntnissen

Erstellen Sie eine adaptive Zoomanzeige auf Mobiltelefonen mit JS_Javascript-Kenntnissen

WBOY
Freigeben: 2016-05-16 15:55:43
Original
1252 Leute haben es durchsucht

JS zum Erstellen einer adaptiven Zoomanzeige auf Mobiltelefonen

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

Nach dem Login kopieren

Beispiel 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>
Nach dem Login kopieren

Beispiel 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">
Nach dem Login kopieren

Zusammenfassung:

1. Es ist eigentlich nicht schwierig. Fügen Sie zunächst eine Zeile Viewport-Meta-Tags am Kopf des Webseitencodes hinzu.

2. Da die Webseite das Layout entsprechend der Bildschirmbreite anpasst, können Sie weder das Layout mit absoluter Breite noch Elemente mit absoluter Breite verwenden.

3. Schriftarten mit relativer Größe können keine absoluten Größen (px), sondern nur relative Größen (em) verwenden.

4. Fluid Grid Die Bedeutung von „Fluid Grid“ besteht darin, dass die Position jedes Blocks schwebend und nicht fixiert ist.

.main { float: right; width: 70 % } .leftBar { float: left; width: 25 %
5. Adaptives Bild (Fluid Image) Neben Layout und Text muss „adaptives Webdesign“ auch eine automatische Skalierung von Bildern implementieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage