和大多数响应式的布局一样,webapp开发也是需要浮动布局和百分比布局,需要考虑的是小屏幕手机250px和大屏幕设备768px,但是习惯以320px和640px来分割,jq中的一句话$(function(){
$(window).resize(function() {
var isWidescreen=$(this).width();
if(isWidescreen<320){
isWidescreen=320;
}else if(isWidescreen>640){
isWidescreen=640;
}
var ratio = isWidescreen / 320;
$(".w640").css({'font-size': ratio * 16+"px" });
}).trigger('resize');

可以检测移动设备width。

使用到Ovflow-y:scroll属性时;要注意设置为absolute;超出部分可以滚动,之前为了固定头尾部,使用了fixed属性,但是在苹果手机里不兼容,然后用了js动态为需要固定的元素设置top和bottom值,window.scrollY,发现手机打开滑动到头部和尾部的时候页面抖动厉害;然后为了解决这个问题,使用了ovflow:scroll;哎,饶了好大一个弯,也算是教训吧

webapp开发中的一些注意的的更多相关文章

  1. 【原】webapp开发中兼容Android4.0以下版本的css hack

    话说现在的手机型号越来越多,主要还是android和ios这2个巨头称霸了江湖,而他们自带的浏览器内核是webkit,那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了 ...

  2. webApp开发中的总结

    meta标签:  H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  3. WebApp 开发中常用的代码片段

    其实这里面的多数都是 iOS 上面的代码.其他平台的就没有去验证了. HTML, 从HTML文档的开始到结束排列: <meta name=”viewport” content=”width=de ...

  4. 移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~

    前言:在移动端WEBAPP开发中会遇到各种各样的问题,通过此文对遇到的问题做一个归纳总结,方便自己日后查询,也给各位前端开发友人做一个参考.   此文中涉及的问题是本人开发中遇到的,解决方案是本人思考 ...

  5. web移动开发中如何实现图标点击态的蒙层效果

    webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要讨论的是如何给图标加上点击的二态效果. ...

  6. 【blade利刃出鞘】一起进入移动端webapp开发吧

    前言 在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说 第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 ...

  7. webapp开发调试环境--weinre配置

    用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳.有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就 ...

  8. (转) 浅析HTML5在移动应用开发中的使用

    (转)浅析HTML5在移动应用开发中的使用 (原)http://www.iteye.com/magazines/67   2012-03-07  来自 UECD.163.com  编辑 wangguo ...

  9. webapp开发需要注意的浏览器内核知识

    Web App:1.开发成本较低使用web开发技术就可以轻松的完成web app的开发2.升级较简单升级不需要通知用户,在服务端更新文件即可,用户完全没有感觉3.维护比较轻松和一般的web一样,维护比 ...

随机推荐

  1. PHP类型转换

    php代码 <?php$foo = "0"; // $foo 是字符串 (ASCII 48)var_dump($foo) ; echo '<br/>'; $foo ...

  2. .NET MEF入门级例子

    学习新东西,喜欢从简单的例子入手,感觉理解和上手会快点,本文记录下我做的一个简单的mef的例子,至于理论的话百度,谷歌多的去了. Mef可以在你调整了某些功能的时候不需要重新去做代码,只需要换掉相应的 ...

  3. XXX esx.problem.syslog.nonpersistent.formatOnHost not found XXX

    ESXi 主机的摘要选项卡报告以下错误:配置问题:XXX esx.problem.syslog.nonpersistent.formatOnHost 未找到 XXX (2101811)   Sympt ...

  4. 动手学servlet(六) 过滤器和监听器

     过滤器(Filter) 过滤器是在客户端和请求资源之间,起一个过滤的作用,举个例子,比如我们要请求admin文件夹下的index.jsp这个页面,那么我们可以用一个过滤器,判断登录用户是不是管理员 ...

  5. STL容器

    啦啦啦,今天听啦高年级学长讲的STL容器啦,发现有好多东西还是有必要记载的,毕竟学长是身经百战的,他在参加各种比赛的时候积累的经验可不是一天两天就能学来的,那个可是炒鸡有价值的啊,啊啊啊啊啊 #inc ...

  6. 在亚马逊amazon的AWS上安装Node和MongoDB服务器

    在亚马逊amazon的AWS上安装Node和MongoDB服务器 在建立AWS上账号.创建EC2 ,用putty链接上之后,就可以用下面的方法开始安装. !!! 如果不是是自己建立的EC2, 而是由B ...

  7. C#:USB设备枚举 --转自CSDN作者:Splash

    (一)DeviceIoControl的PInvoke /* ---------------------------------------------------------- 文件名称:Device ...

  8. Linux top命令排序

    在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 Linux 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会以 ...

  9. ios中,在SearchBar里面搜索内容,可根据内容来查找所需的信息资源,可获得SearchBar中的内容

    贴一段我很久以前写的小demo,你们就明白了,是把textField套在alertView里的@interface ViewController : UIViewController <UIAl ...

  10. buildroot使用详解

    为什么要使用buildroot? (文件系统搭建,强烈建议直接用buildroot,官网[http://buildroot.uclibc.org/]上有使用教程非常详细)文件系统通常要包含很多第三方软 ...