移动端游览器自适应代码

移动端游览器自适应调整

 1 <script type="text/javascript">// <![CDATA[
 2 var jsVer = 28;
 3
 4         var phoneWidth = parseInt(window.screen.width);
 5
 6         var phoneScale = phoneWidth / 640;
 7
 8         var ua = navigator.userAgent;
 9
10         if (/Android (\d+\.\d+)/.test(ua)) {
11
12             var version = parseFloat(RegExp.$1);
13
14             // andriod 2.3
15
16             if (version > 2.3) {
17
18                 document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘ + phoneScale + ‘, maximum-scale = ‘ + phoneScale + ‘, target-densitydpi=device-dpi">‘);
19
20                 // andriod 2.3以上
21
22             } else {
23
24                 document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);
25
26             }
27
28             // 其他系统
29
30         } else {
31
32             document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);
33
34         }
35 // ]]></script>

时间: 2024-10-11 19:48:28

移动端游览器自适应代码的相关文章

js判断游览器是移动端还是PC端

js判断网页游览器是移动端还是PC端 1 <script type="text/javascript"> 2 function browserRedirect() { 3 var sUserAgent = navigator.userAgent.toLowerCase(); 4 var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; 5 var bIsIphoneOs = sUserAgent.match(/

纯CSS无hacks的跨游览器多列布局

利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中都能通过验证. 问题的症结所在 如上图所示,由于各列的内容不一致导致其背景的高度也不统一.而背景实质上是内容(标准的盒子模型是由内容区,补白区,边框区与边界区组成,背景存在于前三者中:IE为前两者)的自适应的问题.再转化一下,如何撑大那些较短的列的高度,让所有列的高度等于最高的列的高度?这个,的确很

移动端web app自适应布局探索与总结

要掌握的知识点: iphone6 屏幕尺寸为 375*667 (pt)也就是 网页 全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大这个值越大(但是像素不一定高) dpr(设备独立像素):2.0   可用(window.devicePixelRatio)得出 (------------像素越高 或者屏幕越小-------dpr越大) window.devicePixelRatio = 物理像素 / dips 屏幕分辨率为 750

谷歌游览器对&lt;input type=&#39;file&#39;&gt; change只能响应1次解决和样式的改变

在项目过程中遇到的需要上传本地文件,file的原始控件不太美观,但是这个控件和button有点不太一样, 改变这个样式的思路就是在控件外面套一层链接,然后把file控件的透明度设置为0(透明).样式只需要对外面那层进行操作就行. html代码: <td style="text-align: left;"> <a href="javascript:;" class="file">选择文件 <input type=&qu

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } positi

字符串的内存优化(游览器内置)

代码1 :    var array = [];                for (var i = 0 ; i < 100000; i++) {                    array.push({ name: "keatkeata" });        }代码2 : var array = [];                for (var i = 0 ; i < 100000; i++) {                    var obj =

做webapp 使用JS来检测游览器是什么类型,或android是什么版本号

此文转自我的www.gbtags.com社区的文章. 做webapp还是微信游戏,特别是canvas,android上不同机器不同版本区别还是很大的.其实,我今天写了这个js,主要是来做js判断游览器类型,特别使用在android的和widnows phone上的 var brower = { versions:function(){ var u = window.navigator.userAgent; var num ; if(u.indexOf('Trident') > -1){ //IE

关于多核游览器指定渲染内核的方法。

代码示例 在head标签中添加一行代码: 1 <html> 2 <head> 3 <meta name="renderer" content="webkit|ie-comp|ie-stand"> 4 </head> 5 <body> 6 </body> 7 </html> content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核

游览器对js加载的次序

直接看例子 <body> <script> console.log("first"); var script = document.createElement("script"); script.src = "js/test.js"; document.body.appendChild(script); //document.getElementsByTagName("head")[0].appendC