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