H5前端常见问题

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

Meta常用标签

1. H5页面结构

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

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

2.其他Meta标签

<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写

<head lang=”en”> 标准的 lang 属性写法

<meta charset=’utf-8′>    声明文档使用的字符编码

<meta name=”description” content=”不超过150个字符”/>       页面描述

<meta name=”keywords” content=””/>      页面关键词

<meta name=”author” content=”name, email@gmail.com”/>    网页作者

<meta name=”robots” content=”index,follow”/>      搜索引擎抓取

<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin

<meta name=”renderer” content=”webkit”>  启用360浏览器的极速模式(webkit)
    
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>          优先使用 IE 最新版本和 Chrome

3.页面缓存设置

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

常见问题

移动端如何定义字体 font-family

@ --------------------------------------中文字体的英文名称
@ 宋体      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字体

打电话发邮件发短信怎么实现

<a href="tel:15221639774">打电话给:15221639774</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:893394342@qq.com">点击我发邮件</a>

点击元素产生背景或边框怎么去掉

//ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
//android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
//winphone系统,点击标签产生的灰色半透明背景，能通过设置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊说明：有些机型去除不了，如小米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下
<meta name="msapplication-tap-highlight" content="no">

手机拍照和上传图片

/IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持
<input type="file" accept="images/*" />
<input type="file" accept="video/*" /

屏幕旋转的事件和样式

//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中无法自动播放

//音频，写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

//音频，写法二
<audio controls="controls"> 
    <source src="music/bg.ogg" type="audio/ogg"></source>
    <source src="music/bg.mp3" type="audio/mpeg"></source>
    优先播放音乐bg.ogg，不支持在播放bg.mp3
</audio>

//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; 时，此元素的内边距和边框不再会增加它的宽度。
例如：
<div class="box">举个例子</div>
.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就是利用了<script>标签可以链接到不同源的js脚本，来到达跨域目的。利用页面上 script 标签可以跨域，并且其 src 指定的js脚本到达浏览器会执行的特性，我们可以进行跨域取得数据

常用字体颜色

Git更新/提交代码

cd kake/ 项目名
sh.git
pull／push
update_1／描述用英文并用下划线分割

注：更新之前可使用git status查看是否有修改，git diff查看所修改文件
注：如果pull的时候有CONFLICT关键字

技术图片
需要进入目录文件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	查找文件