H5前端常见问题

摘要：走了程序媛这条路英式吐槽不经历风雨怎么有夏天岁月带走的是你的童年带不走的是藏在你内心深处的那颗童心其实程序员都挺幼稚得啦哈哈常用标签页面结构设置宽度，为一个正整数，或字符串设置高度，一般设置了宽度，会自动解析出高度，可以不用设置

走了程序媛这条路
英式吐槽：不经历风雨 怎么有夏天
2017.6.1
岁月带走的是你的童年
带不走的是藏在你内心深处的那颗童心
Ps:其实程序员都挺幼稚得啦O(∩_∩)O哈哈~

1. H5页面结构

// width    设置viewport宽度，为一个正整数，或字符串‘device-width’
// height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale    默认缩放比例，为一个数字，可以带小数
// minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable    是否允许手动缩放

2.其他Meta标签

  H5标准声明，使用 HTML5 doctype，不区分大小写

 标准的 lang 属性写法

    声明文档使用的字符编码

       页面描述

      页面关键词

    网页作者

      搜索引擎抓取

 iOS 设备 begin

  启用360浏览器的极速模式(webkit)
    
          优先使用 IE 最新版本和 Chrome

3.页面缓存设置

@ --------------------------------------中文字体的英文名称
@ 宋体      SimSun
@ 黑体      SimHei
@ 微信雅黑   Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体    NSimSun
@ 新细明体  MingLiU
@ 细明体    MingLiU
@ 标楷体    DFKai-SB
@ 仿宋     FangSong
@ 楷体     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷体_GB2312  KaiTi_GB2312  
@
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; } 

引用iconfont字体方法

点击查看如何引用iconfont字体

打电话给:15221639774
发短信给: 10086
点击我发邮件

//ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
//android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
//winphone系统,点击标签产生的灰色半透明背景，能通过设置去掉；
//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
}   
// 也可以 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下

/IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持


屏幕旋转的事件和样式
//JS处理
function orientInit(){
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?"landscape":"portrait";
    if(orientChk =="lapdscape"){
        //这里是横屏下需要执行的事件
    }else{
        //这里是竖屏下需要执行的事件
    }
}

orientInit();
window.addEventListener("onorientationchange" in window?"orientationchange":"resize", function(){
    setTimeout(orientInit, 100);
},false)    

//CSS处理
//竖屏时样式
@media all and (orientation:portrait){   }
//横屏时样式
@media all and (orientation:landscape){   }
超实用的CSS样式
* { padding: 0; margin: 0; border: 0;}
input, textarea, button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; vertical-align: middle; }
ul, li { list-style-type: none; }
body { min-width: 320px; max-width: 640px; margin: auto;background: none;}
em { font-style: normal; }

//改变输入框placeholder的颜色值
::-webkit-input-placeholder { /* WebKit browsers */color:#999;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#999;}
::-moz-placeholder { /* Mozilla Firefox 19+ */color:#999;}
:-ms-input-placeholder { /* Internet Explorer 10+ */color:#999;}
audio元素和video元素在ios和andriod中无法自动播放
//音频，写法一


//音频，写法二


//JS绑定自动播放（操作window时，播放音乐）
$(window).one("touchstart", function(){
    music.play();
})

//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常
//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间
JS判断微信浏览器
function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger"){
        return true;
    }else{
        return false;
    }
}

消除transition闪屏
.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
box-sizing: border-box的作用
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
例如：
举个例子
.box {  
    width: 500px;     
    height:100px;  
    border: 1px solid #000;
    -webkit-box-sizing: border-box;     
        -moz-box-sizing: border-box;
                  box-sizing: border-box;
}
如果这时候你加上一个内边距属性，padding: 10px;
这个div不会撑开，即你所见的边框位置没有任何变动，但是“举个例子”这句话会和div边框有10px的间距。
一般在写页面的时候用这个属性就不会再考虑边框和内边距会改变整体所占宽度，即不用再根据盒子模型再去计算，省去很多麻烦。
Jsonp原理
原理：而jsonp就是利用了
需要进入目录文件git add +文件冲突路径解决冲突一定不要忘记这一步哦
Linux常用命令


命令
作用



pwd
显示当前操作路径


ls
列出当前目录所有文件


ls-al
查看隐藏文件


rm
移除某个文件


open
打开当前目录视图


history
grep npm
查找历史记录


cd $COMPANY
/Users/apple/Documents/Project/Maiqi


cat
查看


tail -f nohup.out
查看日志消息


vim filename
打开文件


git status
查看当前代码状态


git diff
查看修改文件


q
退出

npm run all npm run listen


Hbuilder常用命令


命令
作用



command+shift+F
格式化


command+T
查找文件