近年来为多家
企业提供网站制作和APP设计服务

找个人外包就找阿甘设计

手机网站H5前端开发的基础内容

来源:涞源 / 时间:2016-04-25 21:30:39 / 浏览:409 / 设计资源

大家知道现在移动端非常火爆,HTML5,css3更是前端开发必须技能,无论是手机APP开发还是微信开发都会用到前端。下面都是常用的前端基础知识。

一、两种良好的拼接带格式字符串的方法

JS拼字符串,一般喜欢用+。如果想要很多行拼在一起,且方便阅读,一般的做法是:

1
2
3
4
5
6
7
8
9
10
11
12
var
s = ’<div>’
+ ’<div>’
+’</div>’
+’<div>${a},{{a}}’
+   ’<ul>’
+       ’<!– for: ${people} as ${p} –>’
+       ’<li>${p.name}</li>’
+       ’<!– /for –>’
+   ’</ul>’
+’</div>’
+’</div>’;

这种已经算比较好了,但还是不够好。比如有太多的+号,有太多的”,这里的结构还算少的,要是再多的话,+和’也会更多。下面是更简洁的方式,也是我一直在用的:

1
2
3
4
5
6
7
8
9
10
11
12
var ss = ’<!– target:Name –>
<div>
<div></div>
<div>${a},{{a}}
<ul>
<!– for: ${people} as ${p} –>
<li>${p.name}</li>
<!– /for –>
</ul>
</div>
</div>
<!– /target –>’;

这种方式的好处显而易见:不管字符串有多长,始终只有一对”,甚至连+都没有;效率比第1种略高。你也可以随时中断(当然,中断时就要闭合一次”),插入变量。


二、Html5 手机网站  input 设置为type=number  的问题

h5网页input 的type设置为number一般会产生三个问题,一个问题是maxlength属性不好用了。另外一个是form提交的时候,默认给取整了。三是部分安卓手机出现样式问题。

问题一的解决办法:

<input name="" type="number" oninput="checkTextLength(this,11)"/>
function checkTextLength(obj,leng){
	if(obj.value.length>leng){
		obj.value=obj.value.substr(0,leng);
		//obj.value=obj.value.substring(0,leng);
		}
}

问题二,是因为form提交默认做了表单验证,step默认是1,要设置step属性,假如保留2位小数,写法如下:

<input name="" type="number" step="0.01" min="1" />
演示如下:  <input name="" type="search" value="" id="searchID"/> 搜索右边出现关闭按钮

<input name="" type="Date" value=""/>  出现时间日期表
<input name="" type="week" value="" />
<input name="" type="tel" value="" />

有兴趣的小伙伴们,可以去试试这些功能。让我们的移动端开发非常方便。

关于step,我在这里做简单的介绍,input 中type=number,一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step。number中默认 step是1。也就是step=0.01,可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01。

假如step和min一起使用,那么数值必须在min和max之间。

看看上面的例子就明白了:

输入框可以输入哪些数字?

首先,最小值是1,那么可以输入1.0,第二个是可以输入(1+3.1)那就是4.1,以此类推,每次点击上下箭头都会增加或者减少3.1,输入其他数字无效。这就是step的简单介绍。

问题三,去除input默认样式

使用方法如下:
.elmClass{
   -webkit-appearance:none;
   -moz-appearance:none;
   appearance:none;
}

使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。

用上面的方法同时可以设置input 按钮样式会被默认样式覆盖。

 三、其他一些比较实用的手机网站Html5前端开发知识点。

(1)、防止按钮点击时 背景闪烁

html{

-webkit-tap-highlight-color: transparent;

}

(2)、设置input的placeholder内容样式的方法

input::-webkit-input-placeholder{
color:#999;
font-size: 14px;
}

(3)、 禁止用户选中文字    -webkit-user-select:none     反之:允许用户复制: -webkit-user-select:auto。当然这个地方需要注意下, -webkit-user-select:auto。必须用在块元素有效。

(4)、移动端点透问题的解决办法:

点透,就是在元素绑定 tap 事件,进行元素的隐藏或移动位置时,其底下的元素刚好绑定了 click 事件或有web响应的元素时,会触发底下元素的响应,形成穿透一样的效果,我们也称之为 点透。在使用 zepto 的 tap 方法时,就会发生点透现象。

解决方法:

1、不要使用 click 事件,用 tap 代替

2、使用 fastclick: https://github.com/ftlabs/fastclick

二、通过transform进行skew变形,rotate旋转会造成出现锯齿现象。

解决办法如下:

.bianxing{ 
-webkit-transform:skew(10deg) rotate(-4deg) translateZ(0);
transform:skew(10deg) rotate(-4deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0);
}

四、移动端 HTML5 audio autoplay 失效问题

这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。

解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。

解决代码:

document.addEventListener("touchstart",function(){
	document.getElementsByTagName('audio')[0].play();  //播放
	document.getElementsByTagName('audio')[0].pause(); //暂停
});

附上移动端视频全屏播放代码:
<video class="video-box" data-index="3" id="video1" x-webkit-airplay="true" webkit-playsinline="true" preload="auto" src="music/guo111.mp4"></video>

关注南方互联:添加微信gannan1174,或者扫描下方二维码快速关注。


本文来自南方互联—从建站设计到淘宝装修全面服务

关键词:APP开发-手机网站

微信咨询
QQ咨询
返回顶部