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 相关文章推荐
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 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
PHP中数组的三种排序方法分享
2012/05/07 PHP
php中session使用示例
2014/03/29 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
ES6新特性之Object的变化分析
2017/03/31 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Python WSGI的深入理解
2018/08/01 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
python配置文件写入过程详解
2019/10/19 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
python接入支付宝的实例操作
2020/07/20 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
What is EJB
2016/07/22 面试题
公益广告标语
2014/06/19 职场文书
男方婚礼答谢词
2015/01/20 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL