前段时间负责了公司的wap站前端工作,目前wap站的基础及较为复杂的几张页面都已经出来,现根据自己的一些经验,贴出部分心得,希望对现在或者以后可能会接触到Wap站的一些人有些帮助

一、本次WAP网站的设计尺寸640*,个人感觉采用640px宽度是较好的选择,主要有以下几点原因:

1、现在主流手机的物理尺寸都在320-640之间,这样通过设置viewport属性,可以实现在多数屏幕上适应,其中设置方法

<meta content="width=device-width, initial-scale=XXXX, maximum-scale=1, user-scalable=no" name="viewport" />(iphone)

<meta content="width=device-width, target-densitydpi=XXXX, user-scalable=no" name="viewport" />(android)

2、采用该尺寸,在ipad设备上设置initial-scale=1,也可以正常浏览,最近看了m.taobao.com,他采用的尺寸是320的,在ipad上显示的就过小

其中对640尺寸的布局,建议采用20-600-20,即左右padding: 20px,主体内容为600px

二、对wap站的js库函数,我以为在不是对swipe、tab等滑动事件有强烈需求的话,不要引入js库函数,原生的js+html5+css3基本上可以实现多数的流畅效果,现在网上推荐的框架有zepto.js、jquery-mobile、sencha touch等,其中我对比了zepto.js和jquery-mobile,感觉mobile太大,zepto要是引入event.js和touch.js也不小,而且zepto-core + event + touch实用性也不高;css3中的transition、transform、animation等新的属性,对动态效果的实现基本已没有什么问题,所以建议最好不要引库函数。

Wap站总结一的更多相关文章

  1. app——分享wap站,数据处理页面展示

    无意中接到了一个小的工作任务:配合手机app端的分享功能做一个wap站,简言之:将手机app端分享的文章id传过来,利用此id再进行一系列的操作,由于文章分为纯文本,图文以及图集的三种类型的文章,因此 ...

  2. 一键生成HTML4和WAP站

    前两天在QQ空间上提到微信上线风铃时,把其中的HTML5错打成HTML4,结果发现很多媒体微博照着转载,依旧说成 "一键生成HTML4和WAP站",这就是转载不注明出处.不署名.不 ...

  3. PhoneGap与WAP站静态化

    最近在参与的WAP站项目,决定将所有页面都静态化处理,登录验证.价格数据等都通ajax动态的方式实现.开始这么规划的目前是为了页面提高网站加载速度及SEO,最近看到了一篇报道phonegap buil ...

  4. jquery mobile 建wap站

    使用jquery mobile 建手机wap站: 几篇比较好的文章 http://wap.yesky.com/dev/225/30974725.shtml http://tech.it168.com/ ...

  5. 移动端经常出现的兼容问题,谈谈移动端应用或者wap站的一些优化技巧和心得

    移动端经常出现的兼容问题,谈谈移动端应用或者wap站的一些优化技巧和心得 1.        安卓浏览器看背景图片,有些设备会模糊. 因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机 ...

  6. wap站、手机APP 接入支付宝、微信、银联支付。

    一.wap站 ①.支付宝接入 1.开发前准备:申请一个通过实名认证的企业支付宝账号,并申请开通手机WAP支付功能. 2.流程 参数准备: 企业支付宝账号的PID(也叫ParnerID)和KEY,如果使 ...

  7. 手机端wap站网页播放腾讯视频代码

    <div class="detail-con clear"> <div id="mod_player_wrap" class="mo ...

  8. 用PHPcms V9四步完成WAP手机站搭建

    用PHPCMS最新发布的V9搭建了ONOW中文网,WEB网站(www.onow.cn)完成后,有用户提供手机访问的问题, 于是着手搭建ONOW手机WAP站(3g.onow.cn). 用PHPCMS V ...

  9. phpcms-v9中建立wap手机站点

    web网站用的是phpcms v9搭建的,为了方便手机用户浏览网站,于是用phpcms v9自带的手机门户模块搭建了个wap站(http:.org换成你的wap网站域名----------- 到这一步 ...

随机推荐

  1. android图片闪烁或帧动画

    remote_recording_transition.xml 文件 <?xml version="1.0" encoding="utf-8"?> ...

  2. 让BOOTSTRAP默认SLIDER支持触屏设备

    var isTouch=('ontouchstart' in window); if(isTouch){ $(".carousel").on('touchstart', funct ...

  3. 【转】html input radio取得被选中项的value

    html代码: <input id="rad" name="rad" type="radio" value="1" ...

  4. [HAOI2012] 容易题

    有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[i]不能取哪些值,我们定义一个数列的积为该数列所有元素的乘积,要求你求出所有可能的数列的积的和 mod 1000000007的 ...

  5. elasticsearch的基本用法

    开始学习使用 elasticsearch, 把步骤记录在这里: 最大的特点: 1. 数据库的 database, 就是  index 2. 数据库的 table,  就是 tag 3. 不要使用bro ...

  6. Python 学习入门(28)—— 服务器实例

    在新的Python 3.x中,BaseHTTPServer, SimpleHTTPServer, CGIHTTPServer整合到http.server包,SocketServer改名为sockets ...

  7. hdu 1062 Text Reverse 字符串

    Text Reverse                                                                                  Time L ...

  8. [AngularJS + Webpack] Using Webpack for angularjs

    1. Install webpack & angular: npm install webpack angular 2. Create webpack.config.js file: modu ...

  9. linux用户与组的管理(命令加入、手动加入、加入组、用户之间的切换)

    一.用户登录的时候须要验证的是这两个文件 检測username   Login:  root                        到该文件夹下检查 /etc/passwd 检測用passwo ...

  10. careercup-数学与概率 7.6

    7.6 在二维平面上,有一些点,请找出经过点数最多的那条线. 解法: 类似于leetcode:Max Points on a Line 我们只需在任意两点之间“画”一条无限长的直线(也即不是线段),并 ...