通过改变viewport 实现网站自适应
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var userAgent = navigator.userAgent;
var index = userAgent.indexOf("Android");
if(index >= 0){
var androidVersion = parseFloat(userAgent.slice(index+8));
if(androidVersion>2.3){
$("head").eq(0).append("<meta name='viewport' content='width=640, initial-scale = "+phoneScale+", minimum-scale = "+phoneScale+", maximum-scale = "+phoneScale+",user-scalable=no, target-densitydpi=device-dpi'>");
}else{
$("head").eq(0).append("<meta name='viewport' content='width=640, target-densitydpi=device-dpi'>");
} }else{
$("head").eq(0).append("<meta name='viewport' content='width=640, initial-scale = "+phoneScale+", minimum-scale = "+phoneScale+", maximum-scale = "+phoneScale+",user-scalable=no, target-densitydpi=device-dpi'>");
}
2. 使用rem实现自适应http://caibaojian.com/web-app-rem.html
3.优化js
(function(a, d) {
var b = a.documentElement,
e = "orientationchange" in window ? "orientationchange" : "resize",
c = function() {
var a = b.clientWidth;
a && (b.style.fontSize = Math.min(a, 640) / 320 * 100 + "px")
};
css = document.createElement('style');
css.type="text/css";
css.innerHTML = "html {font-size:"+Math.min(b.clientWidth, 640) / 320 * 100+"px}";
a.getElementsByTagName('head')[0].appendChild(css);
a.addEventListener && (d.addEventListener(e, c, !1), a.addEventListener("DOMContentLoaded", c, !1));
})(document, window);
通过改变viewport 实现网站自适应的更多相关文章
- 手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应
转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mo ...
- 改变字体大小实现自适应之js方案A
一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...
- 特产网站自适应CSS
下面是一个特产网站自适应CSS,这个特产自适应CSS通过屏幕宽度大小来进行适应的,而不是根据UA来判断,就加快了判断的速度,所以速度很快 中国特产站排名还是很好的,特别是手机端 li { list-s ...
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
- html5手机网站需要加的那些meta标签,手机网站自适应
的html5相关meta和标签 a.<!-- 强制让文档与设备的宽度保持1:1 --> <meta name="viewport" content=& ...
- [转] -- html5手机网站自适应需要加的meta标签
webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" ...
- rem布局和使用js rem动态改变字体大小,自适应
解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...
- 使用js rem动态改变字体大小,自适应
<html> <head> <meta charset="utf-8"> <script> console.log(window.d ...
- meta viewport移动端自适应
参考链接:https://www.jianshu.com/p/561357d7cd7b
随机推荐
- 终结者:具体解释Nginx(一)
相信非常多人都听过Nginx.这个小巧的东西能够和Apache及IIS相媲美. 那么它有什么作用呢?一句话.它是一个减轻Web应用server(如Tomcat)压力和实现Web应用se ...
- HDInsight HBase概观
HDInsight HBase概观 什么是HBase的? HBase它是基于HadoopApache开源NoSQL数据库.它提供了很多非结构化和半结构化数据一致性的随机存取能力的.它是仿照谷歌的Big ...
- LinbDesk --- 新的extjs4.2 desktop demo : 技术交流Q群:336584192
很多朋友对extjs desktop感兴趣,就在原来简单的dsktop基础上,作了很多拓展 主要例如以下: 软件更新情况介绍: LinbDesk 拓展自Extjs 4.2的桌面Demo 拓展代码适用 ...
- 一个好用的web甘特图
前些天一直在弄web甘特图,发现网上很多web甘特图框架,但大部分是收费的.偶尔发现了向日葵甘特图 感觉不错,特此写下来一方面当做记录,另一方面也为寻找web甘特图的同学们少走一些弯路,双赢嘛~ ...
- 【android】ImageView的src和background以及两者之间的神奇的差异
一.ImageView中XML属性src和background的差别: background会依据ImageView组件给定的长宽进行拉伸.而src就存放的是原图的大小,不会进行拉伸.src是图片内容 ...
- 假设动态运行java文字,当在脚本式配置,这是非常方便的
package com.bfrj.core.groovy; import java.util.HashMap; import java.util.Map; import org.jeecgframew ...
- [Linux]使用Clang实现代码静态分析
1.按下开关Clang sudo apt-get install Clang 2.编写测试程序 memleak.c #include<stdio.h> #include<stdli ...
- 14行脚本配置Linux下一个Java环境变量
供Java人们刚开始学习.多半Java它需要花费大量的精力在开发环境的配置,于Linux下一个,构造Java环境变量,很可能加入这一努力. 为此,我做了一个bash脚本来配置自己主动Java环境变量. ...
- cocos2d-x-3.1 经常使用宏 (coco2d-x 学习笔记五)
在代码中使用这些宏,能够降低敲键盘的次数,从而提高编写效率. 与节点属性(property)相关的 CC_PROPERTY_READONLY CC_PROPERTY_READONLY_PASS_BY_ ...
- linux_sed 正则替换
目标 替换 test.data文件中的 原正则: (\d{4}[^)]*?) sed不支持 \d 改为0-9 测试 :head test.data| sed -r "s/([0-9]{4}[ ...