移动端WEB开发常见问题

项目的移动端开发工作量剧增,解决各种问题又没有时间去系统整理,在这里先做一个持续的碎片记录笔记。

一、meta标签声明移动端布局
常用的声明方式:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />
  • width:控制 viewport 的大小,可以指定的一个像素值,如“1024”。常用特殊值: device-width (设备的宽度)。
  • height:同 width。
  • minimum-scale:允许用户缩放的最小比例,如:1.0(不可缩放)。
  • initial-scale:初始缩放比例,常用:1.0
  • maximum-scale:允许用户放大到的最大比例。
  • user-scalable:用户是否可以手动缩放。 值:0/1

二、移动端浏览器javascript判断方法:
《javascript判断手机/平板电脑浏览器》

二、微信浏览器的判断方法:
《如何判断微信浏览器?》

三、IOS下表单按钮显示默认风格(如图),无法按设计需求显示。
ios_submit
解决方法,取消IOS默认风格:

input[type=submit],input[type=button]{-webkit-appearance: none;}

四、移动设备横竖切换时,页面字体变大问题。

CSS
-webkit-text-size-adjust: none;
text-size-adjust: none

未完待续…

javascript判断手机/平板电脑浏览器

判断用户是否是移动设备(手机浏览器、平板电脑)浏览器的方法:

if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
    if(window.location.href.indexOf("?mobile")<0){
        try{
          if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
               // window.location.href="http://m.guzheng.cn/";
            }else if(/iPad/i.test(navigator.userAgent)){
              window.location.href="http://www.guzheng.cn/";
            }else{
              //window.location.href="http://m.guzheng.cn/";
            }
        }catch(e)
		{

		}
    }
}
else
{
 //window.location.href="http://www.guzheng.cn/";
}

JQuery插件,可以看到全局的古筝缩略图

记录一下之前关于网页中古筝缩略图的一些思考,和最终写出的一个JQuery插件。
网站的缩略图以古筝为主,古筝是一件形状较长的乐器。在网页上一般会用古筝的尾部作为缩略图(古筝尾部的工艺设计比较有代表性)。如图:

继续阅读JQuery插件,可以看到全局的古筝缩略图

让IE6/IE7/IE8支持HTML5

IE9 开始对HTML5的支持率表现不错,但之前的版本还是不能解析HTML5大部分标签。考虑到IE的市场占有率,需要CSS,javascript来解决一些问题:
方法一:用JS来创建对象,CSS解决兼容问题:
1、HTML5标签大都为块状元素,但IE将HTML5标签解析为内联元素。需要为它们定义样式:

header, footer, article, section, nav, menu, hgroup {
   display: block;
}

2、使用document.createElement()方法来为IE创建对象。

document.createElement("header");
document.createElement("article");
document.createElement("footer");
document.createElement("nav");
document.createElement("menu");

方法二:可以使用html5shiv.js来解决问题:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

使用jquery插来操作cookie —— JQuery.cookie.js

JQuery.cookie.js 常用方法:

1、新建并设置cookie的值

//
/* 新建并设置cookie的值 */
$.cookie("hiheng";, "www.hiheng.com");
//

2、读取Cookie值

//
/* 读取Cookie值, 输出"www.hiheng.com" */
$.cookie("hiheng"); 
//

3、设置cookie的有效期,expires属性

//
/* 设置cookie的有效期一周。 */
$.cookie("hiheng", "www.hiheng.com",{expires: 7}); 
//

4、设置cookie的域名范围,domain属性

//
/* 设置cookie的域名范围,hiheng.com */
$.cookie("hiheng", "www.hiheng.com", {domain: "hiheng.com"});
//

5、设置cookie的有效路径,path属性

//
/* 新建一个cookie 包括有效期 路径 域名等 */
$.cookie("hiheng", "www.hiheng.com", {path: "/"});
//

6、综合设置cookie的各种属性

//
/* 新建一个cookie 包括有效期 路径 域名等 */
$.cookie("hiheng", "www.hiheng.com", {expires: 7, path: "/", domain: "hiheng.com", secure: true});
//

7、删除一个cookie

//
/* 删除一个name为”hiheng“的cookie */
$.cookie("hiheng", null); 
//

jquery.cookie.js源码,下载

jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { 
        options = options || {};    
        if (value === null) {
            value = '';
            options.expires = -1;   
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString();
        }
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { 
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};