H5前端常见问题

时间  2019-12-07 标签 h5 前端 常见问题

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

Meta经常使用标签

1. H5页面结构html

<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标签android

<!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.页面缓存设置ios

<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字体方法git

点击查看如何引用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脚本到达浏览器会执行的特性，咱们能够进行跨域取得数据web

经常使用字体颜色

| 颜色 | 色值 |
| 果冻粉 | #fc5d7b |
| 果冻蓝 | #55c1dd |
| 分割线 | #f2f2f2 #e1e9f0 #ebebeb浅色|
| 图片渐变蒙版 | -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));|
| 比1px更细的边框 | box-shadow:0 0 1px 0 #e6e6e6; |
| 用好看的杯子 喝水都比较甜 |
| 要像那个小女孩 生活自由自在 和我一块儿度过一个蓝色的夏天吧|
| 英式吐槽：不经历风雨 怎么有夏天 |
| 落日的夕阳使你明艳动人|chrome

Git更新/提交代码

  1. cd kake/ 项目名npm

  2. sh.gitjson

  3. pull／push

  4. update_1／描述用英文并用下划线分割

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

clipboard.png
须要进入目录文件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 查找文件
联系我们 沪ICP备13005482号-10