JS制作手机端自适应缩放显示

前端技术 2023/09/03 JavaScript

JS制作手机端自适应缩放显示

示例一：

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

示例二：

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

示例三：

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

总结：

一.其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /> 

二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

三. 相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em）。

四. 流动布局（fluid grid） \"流动布局\"的含义是，各个区块的位置都是浮动的，不是固定不变的。 　
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } 

五. 图片的自适应（fluid image） 除了布局和文本，\"自适应网页设计\"还必须实现图片的自动缩放。

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/7135

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案