通过改变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
随机推荐
- Android用户界面设计:框架布局(转)
摘要:框架布局是Android开发者组织视图控件最简单和最有效的布局之一.通过本文,你将学到所有关于框架布局的知识,它们主要用来在屏幕上组织特别的或重叠的视图控件.使用得当的话,很多有趣的Androi ...
- Codeforces Round #271 (Div. 2) E题 Pillars(线段树维护DP)
题目地址:http://codeforces.com/contest/474/problem/E 第一次遇到这样的用线段树来维护DP的题目.ASC中也遇到过,当时也非常自然的想到了线段树维护DP,可是 ...
- 【POJ3268】Silver Cow Party 最短
意甲冠军:一群奶牛去的地方.去回,然后回去寻找最伟大值. 题解:两遍最短路,结束.邻接矩阵存边能够避免建反图. #include <cstdio> #include <cstring ...
- org.springframework.dao.InvalidDataAccessApiUsageException: detached entity passed to persist: sys.entity.Role; nested exception is org.hibernate.PersistentObjectException: 的解决方案
1.错误信息 org.springframework.dao.InvalidDataAccessApiUsageException: detached entity passed to persist ...
- poj 2449 Remmarguts' Date 【SPFA+Astar】【古典】
称号:poj 2449 Remmarguts' Date 意甲冠军:给定一个图,乞讨k短路. 算法:SPFA求最短路 + AStar 以下引用大牛的分析: 首先,为了说话方便,列出一些术语: 在启示式 ...
- 多普勒失真信号采样Matlab模拟分析
多普勒失真信号采样Matlab模拟分析 方案 水声通信指的是使用声信号在水中数据传输. 相对而言.电磁信号在水中吸收严重衰减过快,光信号受水中悬浮颗粒的影响,也无法完毕远距离传输. 这两种信号的传播距 ...
- jquery.validate1.13
jquery.validate新的写法(jquery.validate1.13.js) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- clearfix:after 清除css浮动
在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开.看 ...
- Skype发布视频API
原文:Skype发布视频API 相信很多人对Skype多少都应该有一些了解,如果以前没有使用过它的服务的话,也应该在最近的新闻中听说过它的大名.因为,它和我们每天都在接触的公司--Mircrosoft ...
- java_log4j 经典配置
程序加载制定日志文件 public static final String log4j = "log4j.xml"; /** * @declare 加载log4j * @throw ...