WebApp 的 meta 标签

apple-mobile-web-app-capable

设置Web应用是否以全屏模式运行。

语法:

说明:
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
兼容性:
iOS 2.1 +
apple-mobile-web-app-status-bar-style

设置Web App的状态栏(屏幕顶部栏)的样式

语法:

说明:
除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。

如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。

兼容性
iOS 2.1 +
format-detection

启动或禁用自动识别页面中的电话号码。

语法:

说明:
默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
兼容性
iOS 1.0 +
viewport

语法:

说明:
使用viewport meta标签可以提升页面在设备上的表现效果,典型地,你可以设置视口(viewport)的宽度和初始缩放比例。

举个例子来说,如果页面的宽度小于980px,你可以设置视口的宽度以适应页面。如果你正在开发一款Web应用,你应该设置视口的宽度为设备的宽度。

表 1 描述了viewport meta标签支持的属性以及它们的默认值。当有多个属性时,应该使用逗号分隔赋值表达式。设置多个属性时请遵循以下规则:

不要使用分号作为分隔符。
空格也可以作为分隔符,但最好使用逗号。
对于属性值是数字的属性,如果属性值包含了非数字字符但是以数字开头,那么只有数字的部分被当做属性值。例如,1.0x等价于1.0,123×456等价于123。如果参数不以数字开头,则属性值为0。
当要用到设备的尺寸数据时,你可以使用表2中的常量替代数字值。例如,使用device-width替代320(宽度),用device-height替代480(高度)。

你不需要设置每一个属性,未设置的属性会自动采用默认值。

设置视口的宽度为设备的宽度:

设置初始缩放比例为1.0:

设置初始缩放比例,同时禁止用户缩放。

兼容性
iOS 1.0 +
表 1 Viewport 属性
属性 描述
width 视口的宽度。默认值是980,取值范围是200至10000,也可以取值为常量device-width。
height 视口的高度。默认值是根据width的值和设备的宽高比来计算,取值范围是223至10000,也可以取值为常量device-height。
initial-scale 视口的初始缩放比例。默认值取决于页面充满屏幕的缩放比例,取值范围取决于minimum-scale和maximum-scale。
minimum-scale 视口的最小缩放比例。默认值是0.25,取值范围是>0至10.0。
maximum-scale 视口的最大缩放比例。默认值是5.0,取值范围是>0至10.0。
user-scable 设置用户是否可以缩放视口。yes表示可以,no表示不能,默认值是yes。设置user-scable为no可以防止当用户在input标签的文本域中输入文本时页面发生滚动。
表 2 特殊的viewport属性值
属性值 描述
device-width 设备的宽度(像素)。
device-height 设备的高度(像素)。

修改网页右键菜单

document.oncontextmenu = function (event){
    var event = event || window.event;
    oMenu.css({"display":"block", "top":event.clientY, "left":event.clientX});
    return false;
};
document.oncontextmenu = function (event){
    return true;
};

js 当前第几周


    function theWeek(week) {
        var totalDays = 0;
        if(week){
            totalDays = -(week*7);
        }
        var now = new Date();
        var years = now.getYear();
        if (years < 1000)
            years += 1900;
        var days = new Array(12);
        days[0] = 31;
        days[2] = 31;
        days[3] = 30;
        days[4] = 31;
        days[5] = 30;
        days[6] = 31;
        days[7] = 31;
        days[8] = 30;
        days[9] = 31;
        days[10] = 30;
        days[11] = 31;

        //判断是否为闰年,针对2月的天数进行计算
        if (Math.round(now.getYear() / 4) == now.getYear() / 4) {
            days[1] = 29
        } else {
            days[1] = 28
        }

        if (now.getMonth() == 0) {
            totalDays = totalDays + now.getDate();
        } else {
            var curMonth = now.getMonth();
            for (var count = 1; count <= curMonth; count++) {
                totalDays = totalDays + days[count - 1];
            }
            totalDays = totalDays + now.getDate();
        }
        //得到第几周
        var week = Math.round(totalDays / 7);
        return week;
    }

js unicode转换

    //js unicode转换
    function decToHex(str){
            var res=[];
            for(var i=0;i < str.length;i++)
                res[i]=("00"+str.charCodeAt(i).toString(16)).slice(-4);
            return "\\u"+res.join("\\u");
    }
    function hexToDec(str){
        str=str.replace(/\\/g,"%");
        return unescape(str);
    }

修改placeholder样式

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* for the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

更好的方法

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color:    #666;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
    color:    #666;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
    color:    #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color:    #666;
}

js 的方法

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc */
}

meta中的viewport指令

在查看bootstrap教程中,碰到

后,在群兄弟小胡帮助下,知道viewport含义:

ViewPort 标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么。使用ViewPort 标记还表示文档针对移动设备进行了优化。ViewPort 标记的content值是由指令及其值组成的以逗号分隔的列表。

例:

width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。

user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放。

initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。

maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。

所有智能手机浏览器都支持ViewPort 标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令,而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。

appearance属性值

Webkit下的appearance属性值

checkbox
radio
push-button
square-button
button
button-bevel
listbox
listitem
menulist
menulist-button
menulist-text
menulist-textfield
scrollbarbutton-up
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
caret
searchfield
searchfield-decoration
searchfield-results-decoration
searchfield-results-button
searchfield-cancel-button
textfield
textarea

Mozilla下的appearance属性值

none
button
checkbox
checkbox-container
checkbox-small
dialog
listbox
menuitem
menulist
menulist-button
menulist-textfield
menupopup
progressbar
radio
radio-container
radio-small
resizer
scrollbar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
separator
statusbar
tab
tab-left-edge Obsolete
tabpanels
textfield
textfield-multiline
toolbar
toolbarbutton
toolbox
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communications-toolbox
-moz-win-glass
-moz-win-media-toolbox
tooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
treeview
window

JS转换时间戳格式为“刚刚”、“1分钟前”、“2小时前”“1天前”等

//JavaScript函数:
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var halfamonth = day * 15;
var month = day * 30;
function getDateDiff(dateTimeStamp){
    var now = new Date().getTime();
    var diffValue = now - dateTimeStamp;
    if(diffValue < 0){
        //若日期不符则弹出窗口告之
        //alert("结束日期不能小于开始日期!");
    }
    var monthC =diffValue/month;
    var weekC =diffValue/(7*day);
    var dayC =diffValue/day;
    var hourC =diffValue/hour;
    var minC =diffValue/minute;
    if(monthC>=1){
        result="发表于" + parseInt(monthC) + "个月前";
    }
    else if(weekC>=1){
        result="发表于" + parseInt(weekC) + "周前";
    }
    else if(dayC>=1){
        result="发表于"+ parseInt(dayC) +"天前";
    }
    else if(hourC>=1){
        result="发表于"+ parseInt(hourC) +"个小时前";
    }
    else if(minC>=1){
        result="发表于"+ parseInt(minC) +"分钟前";
    }else
        result="刚刚发表";
    return result;
}
//js函数代码:字符串转换为时间戳
function getDateTimeStamp(dateStr){
    return Date.parse(dateStr.replace(/-/gi,"/"));
}

window resize scroll优化

只要用户改变窗口大小,会对内部一些元素大小重新计算,可能导致整个页面重新渲染,最终导致大量消耗 CPU。比如调用 resize 方法,用户改变窗口大小时会不停的被触发, 低版本的IE 会可能陷入假死状态。window的scroll事件也是如此,鼠标滚动或拖动滚动条,就会不停的触发scroll事件,如果处理的东西多,低版本的IE也会陷入假死状态。

基本的优化思路:在一定的时间之内,只执行一次resize事件函数。

var resizeTimer = null;
$(window).on('resize', function () {
        if (resizeTimer) {
            clearTimeout(resizeTimer)
        }
        resizeTimer = setTimeout(function(){
            console.log("window resize");
        }, 400);
    }
);

去除h5的search button上面的叉

直接上样式

input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}