标签：
itcss3/javascripthtml5webapp手机网站搭建 |
分类： 前端制作之微信技巧篇 |
随着微信的越来越大众化，微信的使用程度也越来越高。随之，产生了一种新的推广模式，即微信推广。在这个微信的大平台上会衍生出许许多多的推广手段。而移动前端作为服务于手机用户的手机网页技术，也不可避免的加入进来。
一些客户不仅仅满足于自己的网站可以在手机浏览器上完美的展现出来，同时还要求可以在微信中进行广泛推广。这就要求移动前端的制作者在制作移动端网站的过程中，还要考虑是否兼容微信的推广。
就制作技术而言，如果可以完美的在手机浏览器中显示，那么在微信推广里也可以完美显示。因为微信中调用的网页引擎就是你手机支持的网页引擎。但在微信中显示的网页和在手机浏览器中显示的网页还是有一些细微的差别，这些细微的差别则决定了一些使用小技巧的可能。
微信对手机网页的支持不是百分之百的，它因为自身业务发展的需要，对网站中的a标签进行了二次封装定义。一些使用在a标签的js代码，在某些特定情况下不产生效果了。而有些a标签则莫名的产生了一些问题。
我举2个例子来说明：
例子1：<a href='tel:400-4000-0000' >XXX<
Sencha Touch是个重量级的框架，是基于extjs写的, 它的使用原理全是封装好的方法，包括页面布局和版块。全是js方法生成。换句话说HTML页面结构文档中之间是没有任何前端代码结构的。这个也算是该框架的一大特点吧。
该框架优点是兼容性很广，Android和IOS上都可以良好的运行。在布局上，手机、平板电脑都可以兼容。但其缺点也较明显。过于封闭，调试起来很麻烦。需要有相当水平的前端技术才能使用。上手较慢，另外，运行速度和流畅度上，同比于jquery mobile、jqmobi、jqtouch差了一些。前端水平一般者，不建议使用该框架！
这个框架我使用的不多。平时偶尔拿来练练手而已，没有实际太多的项目开发的使用经验，对该框架的使用程度而言，我只是停留在初级阶段，对它没有进行很深入的研究和学习。因此本文权当是该框架的入门文章。只对该框架的进行简单的介绍即可。想通过该篇文档对Sencha Touch框架的使用水平有质的飞跃的话,请选择专业的教程进行系统的学习，谢谢。
言归正传，下面对该框架进行简单的介绍，同时我已经认为你的电脑上已经下载了该框架的整体文件包了。以下为代码：<!DOCTYPE html
标签：
css3/javascripthtml5webapp手机网站搭建移动前端 |
分类： 前端制作之自适应制作篇 |
随着移动前端的手机屏幕分辨率越来越多，自适应设计制作显得越来越重要。如何自适应屏高和屏宽是每个设计和制作人员共同需要考虑的事情。设计人员需要考虑N多分辨率的情况，而制作人员则需要考虑如何自适应布局等等。
我先从设计的角度来阐述这个问题，首先要考虑如何进行自适应设计。这个需要和制作人员进行沟通后决定，如果制作人员采用响应式布局（稍后会介绍此布局）的制作方案的话，则需要设计人员根据不同的屏宽来设计不同的效果图以便提供给制作人员进行响应式布局制作。如果制作人员采用高宽最大化（稍后会介绍此布局）来进行布局制作的话，则需要设计人员提供一个最合理的分辨率设计效果图来适应主流的所有分辨率屏幕的手机。
一、响应式布局
相应式布局的核心内容其实就是使用CSS3引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
&l
首先，我们先熟悉一下jQTouch的结构代码：
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>jQTouch β</title>
<style type='text/css' media='screen'>
@import 'css/jqtouch.css';
</style>
<script src='js/jquery-1.4.2.min.js' type='text/javascript' charset='utf-8'></script>
<script src='js/jqtouch.js' type='application/x-javascript' charset='utf-8'></script>
<script type='text/javascript' charset='utf-8'>
var jQT = new $.jQTouch({
上文中，提到了许多的移动前端框架，这次主要介绍jqMobi框架。jqMobi也是轻量级框架、它的语言基于jquery语言。并对其进行了简化，更有利于在移动设备上进行应用，并且速度很流畅。上手很容易。
首先，我们要先部署jqMobi的环境，以下是代码：
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>jqmobi精简版本</title>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
<meta name='apple-mobile-web-app-capable' content='yes' />
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>
<link rel='stylesheet' type='text/css' href='css/jq.ui.css' title='default'/>
<script type='text/javascript' charset='utf-8' src='js/jq.mobi.js'></script>
<script type='text/javascript' charset='utf-8' src='js/jq.debug.js'></script
为了更好的提升用户体验，移动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点：
一、Sencha Touch框架是一个重量级的框架、它上手较难，代码复杂，并且需要较强的程序基础才能学习，最开始的时候因为一个项目，想使用Sencha Touch框架，后来工期实在太紧张，根本没时间学习它并使用。所以最后转投其他框架。这个框架兼容性很高，运行起来的速度一般，需要长时间的学习且需要水平较高的程序基础才行。所以不太适合前端制作人员的使用。我会在以后的机会单开一篇关于它的使用demo。
二、JQTouch是一个轻量级框架、纯jquery写法，上手比较容易，代码容易理解，加载速度也很快，缺点是配合的移动端效果插件较少，需要很多外部的插件相结合，另外，个别插件还需要解决与框架之间的兼容问题。它的最大的一个弊端就是可利用和变通的布局较少。
三、Jquery-moblie也是一个轻量级框架、纯jquery写法，上手容
标签：
css3/javascripthtml5webapp手机网站搭建移动前端 |
分类： 前端制作之javascript篇 |
在互联网中，一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件，但是在移动前端，用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发，但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。
在移动端的手势事件一般有四种情况：
touchstart: 手指放到屏幕上的时候触发touchmove: 手指在屏幕上移动的时候触发
touchend: 手指从屏幕上拿起的时候触发
touchcancel: 系统取消touch事件的时候触发。
前三者应用很广泛，第四个应用较少。至今所做的项目中，第四项还没涉及过。如果有人用过，可以拿出来分享一下。
前三者可以看成是用户操作的一个过程。它们一般都是结合在一起使用。我举个360°旋转的例子，通过代码详细说明一下。
<!DOCTYPE html>
<html>
<meta charset='utf-8'/>
<meta name='viewport' content='width=48
标签：
css3/javascripthtml5webapp手机网站搭建移动前端 |
分类： 前端制作之javascript篇 |
javascript(简称js)语言在移动前端应用很广。可以说必不可少，许多效果都是和js相关的。包括现在移动端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。这些都是基于js而进行编写的。这篇暂时不讨论这些框架。以后会慢慢介绍其中的一两个框架的具体使用方法。这篇主要讨论一下部分常用的js事件在移动端的使用。举几个例子：
1、隐藏地址导航栏：
<script type='text/javascript'>
// 该函数由Simon Willison编写,它只有一个参数,该参数表示被调用的函数名(在页面加载完毕时执行的函数的名字)
function addLoadEvent(func) {
var oldon1oad = window.on1oad;
if (typeof window.on1oad != 'function') {
window.on1oad = func;
}
else {
&
标签：
css3/javascripthtml5webapp手机网站搭建移动前端 |
分类： 前端制作之LINK标签篇 |
上文的meta标签中，提到了部分功能要结合link标签进行使用。下面详细的解释一下移动端的link标签。link标签主要是存放CSS文件的地方，同时还有一些专属的移动端设置在这里体现。结合以下代码进行说明：
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='viewport' content='width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' />
<meta http-equiv='Cache-Control' content='no-store' />
<meta name='apple-mobile-web-app-status-bar-style' content='black'/>
<meta name='apple-mobile-web-app-capable' content='yes' />
<link rel='apple-touch-startup-image' href='images/start.jpg'/>
<link rel='apple-touch-icon' href='images/iphone.png' />
<link rel='apple-touch-icon' sizes='72x72' href='images/ipad.png' />
<link rel='apple-touch-icon' sizes='114x114' href='images/iphone4.png' />
<link rel='stylesheet' type='text