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


Posted in Javascript onJune 11, 2015

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

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

Javascript 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
实现placeholder效果的方案汇总
Jun 11 #Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 #Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 #Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 #Javascript
javascript 常见功能汇总
Jun 11 #Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 #Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 #Javascript
You might like
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
讲解Python中fileno()方法的使用
2015/05/24 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python金融数据可视化汇总
2017/11/17 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python MySQLdb使用教程详解
2018/03/20 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
安全检查管理制度
2014/02/02 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
python如何读取和存储dict()与.json格式文件
2022/06/25 Python