一.viewport宽度 起源:PC端的网站要显示在移动端有什么问题? 如果把移动端的可是区域设置到(320-768)的话,大部分网站都会因为太窄而显示错乱 所以浏览器默认把viewport[这个viewport指的是layout viewport]设置为一个较宽的值980px或者1024px,至少保证PC网站在移动端上可以显示,只是超出部分出行横向滚动. 二.概念 1.css像素 html页面中单位是px,在pc中往往1 css px=1物理像素 css像素是相对值,在不同设备中1px对应不同…

响应式设计的意义 随着移动设备的发展,移动设备以迅猛的势头分刮着PC的占有率,ipad或者android pad的市场占有率稳步提升,所以我们的程序需要在ipad上很好的运行,对于公司来说有以下负担:设备系统上来说主要分为android ios:尺寸上看又以手机与pad为一个分界线,如果再加一个H5站点,其开发所投入资源不可谓不小! Hybrid的出现,解决了大部分问题,针对尺寸上的问题有一种东西叫做响应式设计,这个响应式设计似乎可以解决我们的问题,所以今天我就来告诉大家什么是响应式设计,或者说…

为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例github地址:https://github.com/iwangx/WebApp 访问地址:https://csssprite.herokuapp.com/ 准备 psd:这个是最重要的东西,用于测量尺寸,以及切图,我是不太同意切图的工作交给ui,自己切比较好,psd的分辨率我做的是640px的宽度,…

单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp究竟是好还是不好真是一言难尽哟! webapp使用JavaScript修改页面:紧接着再从服务器传递更多数据然后再修改页面,如此循环. 从性能的角度看,在现代浏览器中单页面Web App已经能够和普通native应用程序相媲美,而且几乎所有的操作系统都支持现代的浏览器. 所以,很多人认为weba…

1. iphone 各机型 机型 分辨率 像素比 物理分辨率 高* 宽 * 后 主屏对角线长度 重量 像素密度(ppi) iphone4/iphone4s 320 * 480 2 640 * 960 4.5x2.31x0.37 in 115.2×58.6×9.3 mm 3.5 in 137/140g  329.65 iphone5/iphone5s 320 * 568 2 640 * 1136 123.8×58.6×7.6 mm 4 in 112g  325.97 iphone6 375 * 6…

从去年开始就负责公司WebApp的产品跟设计工作,最近整体大改了两个版本,也算累积了一些实际的经验.在不断学习的过程中,发现对于WebApp可以直接用于项目上的资料比较零碎,在这里总结一下,供初做 WebApp的设计师在实际项目中参考. 设计尺寸:基于宽度320px 一般大家看到的移动端设计尺寸参考都是基于ios或者Android,是绝对不能直接用于WebApp的设计中.而且常用的PS Play也不适用查看WebApp的效果. WebApp本质上还是一个网页,它的尺寸(特别是宽度)是依赖于每个手…

1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320. 因此我们必须改变viewport,我们就有如下几种属性值可以设置: width: viewport 的宽度 (范围从 200 到 10,00…

最近随着 Apple iOS 和 Android 平台的盛行,一个新的名词 WebApp 也逐渐火了起来,这里我也趁着热潮做一个关于 WebApp 系列的学习笔记,分享平时的一些研究以及项目中的经验,在现阶段研究对象暂时限定为 iOS 平台(iPhone/iPad/iPod touch),随后会扩展到 Android 平台. 对于 WebApp,我的理解是:它一个基于 Web 形式的应用程序,是针对智能手机.平板电脑等高性能移动设备做了特别优化的网页或网站,它相对原生应用程序(Native Ap…

webapp开发的大趋势之下,本人收集整理了一写关于webapp开发的经验,欢迎大家补充指正. 关于link <link rel="apple-touch-startup-image" href="images/start.jpg"/> 表示在点击主屏幕中生成的快捷图标后,网站在加载过程中,显示的图片.这个功能用户体验很好.避免加载时的白屏,减少用户等待网站加载过程的烦闷.缺陷是目前只支持竖屏浏览模式,横屏浏览时不支持. <link rel=&qu…

单页or多页 webapp 现状 优劣之分 网络传输优化 综述 fake页-首屏加速 降低请求数 降低请求量 缓存Ajax/localstorage DOM操作优化 综述 关于页面渲染 减少使用定位属性(fixed/absolute) 奇技淫巧 内存资源优化 体验优化 区域滚动 点击响应 结语 单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,webapp…