通过改变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
随机推荐
- hdu 2067 兔子板
兔子板 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- 【git学习五】git基础之git分支
1.背景 最早用github的时候,我傻傻的问舍友大神,git里面的branch是干什么的,他用了非常直白的解释,我至今还记得."branch就是你能够自己建立 ...
- 用脚本安装IIS
原文:用脚本安装IIS 基本命令:Sysocmgr.exe /i:sysoc.inf /u:c:/iis.txt c:/iis.txt是IIS要安装的组件列表 [Components]iis_comm ...
- ISA TEST Writeup
刚出来的hack游戏,非常easy,现在只有7关.考虑入门级.没有什么可以玩. http://helloisa.com/ LEVEL 1 细致观察页面,入侵的第一步是收集一切可能产生价值的信息 ps: ...
- spring framework 4 源代码阅读器(1) --- 事前准备
在你开始看代码.的第一件事要做的就是下载代码. 这里:https://github.com/spring-projects/spring-framework 下载完整的使用发现gradle建立管理工具 ...
- Unix / 类 Unix shell 中有哪些很酷很冷门很少用很有用的命令?(转)
著作权归作者所有. 商业转载请联系作者获得授权,非商业转载请注明出处. 作者:孙立伟 链接:http://www.zhihu.com/question/20140085/answer/14107336 ...
- 我的Linux学习历程:那些我看过的Linux书籍们
[+]查看原图http://www.ituring.com.cn/article/119401 来北京工作已经一个多月,大都市的生活比起读大学要忙碌得多,尤其是出行,基本以小时为基本的计时单位.有时茫 ...
- ashx的学习
原文:ashx的学习 嘿嘿,今天我们休息,本来是想总结一下前两周学习的javascript和jquery,但是感觉好困哦,就没有认真地学习啦,于是做了一个小小的练习,刚开始学习html使用在项目中还是 ...
- HDU-4862-Jump
比今年第二个问题,第一个田间学校更多.在游戏中可以做不做,卡在K一旦有.阅读解决一个问题后,才做.内置图所示k这的确是很聪明倍. 代码: #include<cstdio> #include ...
- SQL Profile (总结4)--使用演示示例
前提:sql profile工具的相关视图 dba_sql_profile 10g: sys.sqlprof$attr & sqlprof$ 11g: sys.sqlobj$data & ...