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

 更新时间:2015年06月11日 11:51:06   投稿:hebedich  
允许网页宽度自动调整的"自适应网页设计"到底是怎么做到的?下面我们就来通过示例来探讨下。

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) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

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

相关文章

  • 微信公众号获取用户地理位置并列出附近的门店的示例代码

    微信公众号获取用户地理位置并列出附近的门店的示例代码

    这篇文章主要介绍了微信公众号获取用户地理位置并列出附近的门店的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 详解小程序如何动态绑定点击的执行方法

    详解小程序如何动态绑定点击的执行方法

    这篇文章主要介绍了详解小程序如何动态绑定点击的执行方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 用JS写的一个TableView控件代码

    用JS写的一个TableView控件代码

    JS写的一个TableView控件代码,方便输出表格。
    2010-01-01
  • 详解JavaScript中Arguments对象用途

    详解JavaScript中Arguments对象用途

    本文主要介绍了详解JavaScript中Arguments对象用途,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript引用赋值与传值赋值总结

    JavaScript引用赋值与传值赋值总结

    这篇文章主要介绍了JavaScript引用赋值与传值赋值总结,在JavaScript中基本数据类型都是传值赋值,复合数据类型都是引用赋值(传地址)也叫引用传址,下文更多相关资料,需要的小伙伴可以参考一下
    2022-05-05
  • Javascript从数组中随机取出不同元素的两种方法

    Javascript从数组中随机取出不同元素的两种方法

    这篇文章给大家分享了两种Javascript从数组中随机取出不同元素的方法,大家可以都学习学习,这样更能有助于大家的学习和理解,下面来一起看看吧
    2016-09-09
  • JS去除空格和换行的正则表达式(推荐)

    JS去除空格和换行的正则表达式(推荐)

    下面小编就为大家带来一篇JS去除空格和换行的正则表达式(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript写的异步加载js文件函数(支持数组传参)

    javascript写的异步加载js文件函数(支持数组传参)

    这篇文章主要介绍了javascript写的异步加载js文件函数,同时支持单个文件和多个文件(数组传参),但不兼容IE6,需要的朋友可以参考下
    2014-06-06
  • Js实现手机发送验证码时按钮延迟操作

    Js实现手机发送验证码时按钮延迟操作

    在做项目的时候,经常遇到发短信验证码的问题,这时候需要用户点完发送验证码按钮后,一段时间内不能重复点击,毕竟验证码都是收费的嘛,谁都不想浪费,那么如何实现这种功能呢?下面来分享一下。
    2014-06-06
  • 如何在微信小程序中使用骨架屏的步骤

    如何在微信小程序中使用骨架屏的步骤

    这篇文章主要介绍了如何在微信小程序中使用骨架屏的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论