做前端的小笔记

最新推荐文章于 2024-11-03 15:22:04 发布

weixin_30241919

最新推荐文章于 2024-11-03 15:22:04 发布

阅读量75

点赞数

文章标签：前端移动开发操作系统 ViewUI

原文链接：http://www.cnblogs.com/shoestrong/p/5763758.html

版权

做前端应该有的这份笔记：

html头部通用

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
　　<input type="text" autocapitalize="off">
　　<!--关闭iOS键盘首字母自动大写-->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->

    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->

    <!-- sns 社交标签 begin -->
    <!-- 参考微博API -->
    <meta property="og:type" content="类型" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="标题" />
    <meta property="og:image" content="图片" />
    <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->

    <title>标题</title>
</head>

css中的reset

@charset "utf-8";

/********** 1.reset **********/
/* 清除标签自带边距 */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,input,textarea,th,td,select,hr,legend,fieldset {margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display: block;}
ul,li {list-style: none;}
input,button,select,textarea {font-family: inherit;font-size: inherit;line-height: inherit;outline: none;background: none;}
textarea {border:none 0;}
iframe[name='google_conversion_frame']{display:none;}/*google 统计样式*/
img,input,textarea {vertical-align: middle;}/* 保持垂直居中 */
img,hr {border: none 0;}/* 去除img边框 */
i,em {font-style: normal;}/* 清除字体倾斜 */

/* 设置HTML5标签 块元素*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}

/*文本框 定义*/
.input{outline:0;color:#999;display:inline-block;padding:0.8em;font-size:14px;font-weight:normal;line-height:1;text-align:left;white-space:nowrap;
    vertical-align: middle;background-image: none;border:1px solid #ececec;border-radius: 3px;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}/*常态输入框*/
.select{border:1px solid #ececec;padding:4px 0;}

input[type="button"], input[type="text"], input[type="password"], input[type="submit"], input[type="reset"], textarea {
/*表单元素的默认外观怎么重置*/
　　-webkit-appearance: none;
　　-moz-appearance: none;
　　-ms-appearance: none;
　　-o-appearance: none;
　　appearance: none;
　　outline: none;
}

/*placeholder的颜色设置*/
input::-webkit-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}
input::-moz-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}
input::-ms-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}
input::-o-input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}
input::input-placeholder{color:#AAAAAA;font-family: "Microsoft YaHei";font-size: 12px;}

/*placeholder获取焦点时的颜色设置*/
input:focus::-webkit-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}
input:focus::-moz-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}
input:focus::-ms-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}
input:focus::-o-input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}
input:focus::input-placeholder{color:#EEEEEE;font-family: "Microsoft YaHei";font-size: 12px;}

/********** css零件 **********/
.clearfix:after {content:'';display: block;height: 0;overflow: hidden;clear: both;}
.l{float:left;}
.r{float:right;}
.i{font-style:italic;}
.fN{font-weight: normal;}
.fB{font-weight: bold;}
.rmb{font-family:Arial;}
.dib{display:inline-block;}
.etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.wrap{word-wrap:break-word;}/*强制换行*/
.nowrap{white-space:nowrap;}/*禁止换行*/
.tc{text-align:center;}

scss通用

@mixin full {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


//clip
@mixin textOverflow($val:ellipsis) {
  overflow: hidden;
  text-overflow:$val;
  white-space: nowrap;
}

html, body {
  @include full;
}

html {
  font-size: 62.5%;
}

/*兼容多点的弹性盒*/
@mixin box($val:horizontal) {    //vertical
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
    @if $val == horizontal {
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -moz-box-orient:horizontal;
        -moz-box-direction:normal;
        flex-direction:row;
        -webkit-flex-direction:row;
    } @else {
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -moz-box-orient:vertical;
        -moz-box-direction:normal;
        flex-direction:column;
        -webkit-flex-direction:column;
    }
    
}
@mixin flex($val:1) {
    -webkit-box-flex:$val;
    -moz-box-flex:$val;
    -ms-box-flex:$val;
    -o-box-flex:$val;
    box-flex:$val;
    -webkit-flex:$val;
    -moz-flex:$val;
    -ms-flex:$val;
    -o-flex:$val;
    flex:$val;
}

这个也是移动端的注意css

body {
  font-family:'Microsoft YaHei','Helvetica';

  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;

  /*禁用元素被点击产生的阴影或边框*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-tap-highlight-color: rgba(0, 0, 0, 0);
  -o-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);

  /*禁止ios和android用户选中文字*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;

  /*禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片*/
  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  -ms-touch-callout: none;
  -o-touch-callout: none;
  touch-callout: none;
}


/*尽可能多的利用硬件能力，如使用3D变形来开启GPU加速*/
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

/*如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;

js中的注意

//iscroll4滚动区域中select,input,textarea元素无法点击的bug修复
onBeforeScrollStart : function(e){
  var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : ”);
  if(nodeType != ‘select’ && nodeType != ‘option’ && nodeType != ‘input’ && nodeType != ‘textarea’){e.preventDefault();}
}

/*Android手机$(window).width() Bug
部门安卓手机通过Zepto.js提供得 $(window).width(); $(window).height()获取浏览器视图宽度与实际宽度不一致。
解决方法：通过document.documentElement.clientWidth 获取宽度。*/

var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;

/*添加css样式：pointer-events: none; 使图片点透。*/

//高频触发事件 采用事件节流 或加以控制---如果中间的code需要处理的东西多的话，FPS就会下降影响程序顺滑度,把代码放在setTimeout中，会发现程序变快.
$('div').on('touchmove', function(){
   setTimeout(function(){
   //.….code
   },0);
});

//封装好的阻止冒泡、阻止浏览器默认行为
function stopBubble(e) {
    if ( e && e.stopPropagation )
    e.stopPropagation();
     else
    window.event.cancelBubble = true;
}
function stopDefault( e ) {
    if ( e && e.preventDefault )
        e.preventDefault();
    else
        window.event.returnValue = false;
    return false;
}