前段时间负责了公司的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. Sublime Text3使用及常用插件

    1.安装packages组件: 参考一: https://sublime.wbond.net/installation 参考二: http://blog.csdn.net/superskk6/arti ...

  2. 《Effect Java》学习笔记1———创建和销毁对象

    第二章 创建和销毁对象 1.考虑用静态工厂方法代替构造器 四大优势: i. 有名称 ii. 不必在每次调用它们的时候都创建一个新的对象:   iii. 可以返回原返回类型的任何子类型的对象: JDBC ...

  3. RH442之Tuned优化方案

    系统优化 介绍: Tuned是监控并收集系统组件使用资源的守护进程,可根据收集信息动态调整系统,可调整CPU和网络资源的使用来提高活跃设备性能与不活跃设备电能消耗.通过tuned-adm中提供优化案例 ...

  4. iOS Xcode的快捷键

    将一些搜集和经常使用的快捷键记录下来,方便你我. Command +1~ 8: 跳转到导航区的不同位置 Command +0 :显示/隐藏导航区 Command Alt 1~ 6:在不同检测器之间跳转 ...

  5. SQL Server 排序函数 ROW_NUMBER和RANK 用法总结

    下面的例子和SQL语句均在SQL Server 2008环境下运行通过,使用SQL Server自带的AdventureWorks数据库. 转载请注明此文原创自 CSDN TJVictor的专栏:ht ...

  6. java 5 ReadWriteLock

    import java.util.ArrayList; import java.util.List; import java.util.concurrent.locks.ReadWriteLock; ...

  7. 表单中Readonly和Disabled的区别(转)

    今天做form提交的时候,用到了disabled,form提交的时候怎么获取都是null,后来用hidden解决了这个问题,但是考虑到为什么,最后找到了原因,转载一篇文章,说明一下 原文:http:/ ...

  8. Callgrind 使用 2

    Callgrind是一款和gprof类似的性能分析工具,与gprof不同的是它不需要在编译源码时附加特殊选项,但推荐加上调试选项.Callgrind使用cachegrind的统计信息Ir(I cach ...

  9. shared_ptr与weak_ptr的例子

    12.20 编写程序,逐行读入一个输入文件,将内容存入一个StrBlob中,用一个StrBlobPtr打印出StrBlob的每个元素. StrBlob.h #ifndef STRBLOB_H #def ...

  10. 精灵类(CCSprite)

    一.对精灵的理解 玩家控制的主角.AI控制的NPC,以及地图上的宝箱.石块,甚至游戏主菜单的背景图片都是精灵.因此,可以这样认为,玩家看到的一切几乎都是由精灵构成的. 精灵不一定是静态的.通常,一个精 ...