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 相关文章推荐
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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
做一个有下拉功能的留言版
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
详解vue路由
2020/08/05 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
django数据库自动重连的方法实例
2019/07/21 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
消防器材管理制度
2014/01/28 职场文书
管理建议书范文
2014/05/13 职场文书
先进单位事迹材料
2014/12/25 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
大学校园招聘会感想
2015/08/10 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技