移动web开发笔记

web 阅读量

Meta标签

1
2
3
4
5
6
7
8
9
10
11
<!--让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。-->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

<!--是否添加至主屏幕的页面允许全屏模式浏览；-->
<meta content="yes" name="apple-mobile-web-app-capable" />

<!--指定的iphone中safari顶端的状态条的样式；-->
<meta content="black" name="apple-mobile-web-app-status-bar-style" />

<!--关闭数字自动识别为电话号码-->
<meta content="telephone=no" name="format-detection" />

触摸并按住触摸目标时候，禁止或显示系统默认菜单

在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
参考自：http://www.css88.com/book/css/webkit/behavior/touch-callout.htm

1
2
3
div {
    -webkit-touch-callout: none
}

禁止用户选中文字

1
2
3
4
p{
    -webkit-user-select:none;
    user-select:none
}

可参考：http://www.css88.com/book/css/properties/user-interface/user-select.htm

使用特殊链接

如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接，

1
2
3
<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>
<a href="mailto:longsair@gmail.com">longsair@gmail.com</a>

或用于单元格：

1
<td onclick="location.href='tel:122'"></td>

去除URL的控件条

1
setTimeout(scrollTo,0,0,0);

获取滚动条的值

pc端获取浏览器的滚动条是通过document.scrollTop&document.scrollLeft，但在ios中这两个值是未定义的，因为ios中没有滚动条的概念，Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？就是上面两个属性，但是事实证明android也支持这属性，所以索性都用：

1
window.scrollY  window.scrollX

Reset Styles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /* 使用无衬线字体 */
}
a, img {
    -webkit-touch-callout: none;    /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;  /* 禁止选中文本 */
    user-select: none;
}
button,input,optgroup,select,textarea {
    -webkit-appearance:none;    /* 去掉webkit默认的表单样式 */
}
a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0);  /* 去掉a、input和button点击时的蓝色外边框和灰色半透明背景 */
}
body {
    -webkit-text-size-adjust: none;   /* 禁止IOS调整字体大小 */
}
input::-webkit-input-speech-button {
    display: none;  /* 隐藏Android的语音输入按钮 */
}
img{
    -webkit-touch-calloutt:none;    /* iOS中如何禁止用户保存图片 复制图片 */
}

/*
 * input placeholder
 */
input::-webkit-input-placeholder { 
    color: #999;    /* WebKit browsers */ 
} 
input:-moz-placeholder { 
    color: #999;    /* Mozilla Firefox 4 to 18 */
} 
input::-moz-placeholder { 
    color: #999;    /* Mozilla Firefox 19+ */
} 
input:-ms-input-placeholder { 
    color: #999;    /* Internet Explorer 10+ */
}

input:focus::-webkit-input-placeholder{
    opacity: 0;     /* 设置placeholder时候 focus时候文字没有隐藏 */
}

h5搜索键盘

经测试发现需要一下组合，可以使呼起的键盘具有“搜索”或“前往”字样。

  1. <form> 标签需要具有action属性
  2. <input> 标签需要设置type="search"

如下：

1
<form action="#"> <input type="search" /> </form>

另外，如果要移除搜索框的叉叉图标，可以设置样式
::-webkit-search-cancel-button { display: none; }

横屏 & 竖屏

事件：
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

1
2
3
4
5
6
7
8
9
10
11
window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}

样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>

@media all and (orientation:portrait) {
    .css{}
}

//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style> 
@media all and (orientation:landscape) {
    .css{}
}

audio & vedio在ios端自动播放

1
2
3
4
5
6
7
8
9
10
11
var oAudio = new Audio('shake.mp3');
var isAudio = false;
var fixaudio = function() {
    if (!isAudio) {
        isAudio = true;
        oAudio.play();
        oAudio.pause(); //这个例子因为是一个摇一摇的背景音乐，不是加载后立即播放，所以用了`oAudio.pause()`
        document.removeEventListener('touchstart', fixaudio, false);
    }
};
document.addEventListener('touchstart', fixaudio, false);

具体讨论参考：http://www.cnblogs.com/PeunZhang/archive/2013/02/05/2893093.html

自动大写与自动修正

要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：

1
<input type="text" autocapitalize="off" autocorrect="off" />

文件上传, 从相机捕获媒体

1
2
3
<input type="file" accept = "image/*; capture=camera" />
<input type="file" accept = "video/*; capture=camcorder" />
<input type="file" accept = "audio/*; capture=microphone" />

使用总结：
: ios 有拍照、录像、选取本地图片功能
: 部分android只有选取本地图片功能
: winphone不支持
: input控件默认外观丑陋

基于css的原生滚动

1
2
3
4
5
6
7
8
ul {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
ul::-webkit-scrollbar {    /* 隐藏滚动条 */
    opacity: 0;
    display: none;
}

消除transition闪屏

1
2
3
4
5
6
div {
    /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
    -webkit-backface-visibility: hidden;
}

播放视频不全屏

1
2
3
4
5
6
7
8
<!--
  1.目前只有ios7+、winphone8+支持自动播放
  2.支持Airplay的设备（如：音箱、Apple TV)播放
    x-webkit-airplay="true" 
  3.播放视频不全屏，ios7+、winphone8+支持，部分android4+支持（含华为、小米、魅族）
    webkit-playsinline="true" 
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

滑屏框架

模拟:hover伪类

因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：

1
2
3
4
5
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
    myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
    myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}

然后用CSS增加hover效果：

1
a:hover, a.hover { /* 你的hover效果 */ }

这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。

判断设备类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//方法一：
function browserRedirect() {
    var ua = navigator.userAgent.toLowerCase();
    var bIsIpad = ua.match(/ipad/i) == "ipad";
    var bIsIphoneOs = ua.match(/iphone os/i) == "iphone os";
    var bIsMidp = ua.match(/midp/i) == "midp";
    var bIsUc7 = ua.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = ua.match(/ucweb/i) == "ucweb";
    var bIsAndroid = ua.match(/android/i) == "android";
    var bIsCE = ua.match(/windows ce/i) == "windows ce";
    var bIsWM = ua.match(/windows mobile/i) == "windows mobile";
    console.log("您的浏览设备为：");
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        console.log("phone");
    } else {
        console.log("pc");
    }
}

//方法二：
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if (agentID.indexOf("iphone") >= 0) {
    alert("iphone");
}
if (agentID.indexOf("ipod") >= 0) {
    alert("ipod");
}
if (agentID.indexOf("ipad") >= 0) {
    alert("ipad");
}
if (agentID.indexOf("android") >= 0) {
    alert("android");
}

flex属性

假设flex容器为.box ，子元素为.item，兼容性自行添加

1、定义容器为flex的布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.box{
    display: -webkit-flex;  /*webkit*/
    display: flex;
}

/*行内flex*/
.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}
``` 

2、定义父容器

```css
.box{
    flex-direction: row | row-reverse | column | column-reverse;
    /*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/

    flex-wrap: nowrap | wrap | wrap-reverse;
    /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/

    flex-flow: <flex-direction> || <flex-wrap>;
    /*主轴方向和换行简写*/

    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/

    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    /*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}

3、子元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.item{
    order: <integer>;
    /*排序：数值越小，越排前，默认为0*/

    flex-grow: <number>; /* default 0 */
    /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

    flex-shrink: <number>; /* default 1 */
    /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/

    flex-basis: <length> | auto; /* default auto */
    /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/

    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2019 FE blog All Rights Reserved.

访客数 : | 访问量 :