« 包含标签 webapp 的文章

[置顶]

基于H5的webapp开发实践系列总结(索引)

时间飞快,转眼间接触H5项目到开发WEBAPP已经有一年半的时间了,新的项目上线,终于可以有一些空余的时间来整理一下这一年多走过的路,虽然艰辛,但收获颇多!总结不容易,尤其是能够清晰描述出来更难,知易行难,希望将经验传递给更多志同道合的来者!接下来将会陆续讲过往遇到的问题及思考写在这个博客里,敬请期待(按时间归档)。

IOS、Android、WP移动平台浏览器下常用字体支持度研究

做了近一年的无线项目,总觉得少了点什么,对,是总结和研究,一直在追随前人的脚步,在他人的经验中获取认知,恐怕做得越多只会觉得得过且过的感觉越深刻,最近终于有空闲的时间来做一些研究和总结了。

webapp风行了很久,但是最近一年才真正实际的应用起来,尤其是混合型的app开发深的企业的青睐,那么作为一名前端工程师,要做的事情就是要把移动端app以web的形式表现出来,自然字体是不可避免的因素,长久以来对三大移动平台的可用常用字体具体怎么定义和表现含糊不清,也出现了很多情况下无法向交互和视觉设计师们解释,故来做怎么一个研究和整理。

研究过程如下:

1. 确定目标范围。

   首先我们不是要研究移动端的设备具体可以支持什么字体,那样毫无意义,我们想要得到的是我们在WEB里常用的字体和类型在移动端的支持度和具体表现。

»阅读全部

web app/mobile web开发指南入门教程

基础知识篇—–摘自:webkit webApp 开发技术要点总结
1. viewport:
也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
实际上我们可以操作的属性有4 个:

1
2
3
4
5
6
width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素)
height -            //  viewport 的高度 (范围从223 到10,000)
initial-scale -     //  初始的缩放比例 (范围从>0 到10)
minimum-scale -     //  允许用户缩放到的最小比例
maximum-scale -     //  允许用户缩放到的最大比例
user-scalable -     //  用户是否可以手动缩 (no,yes)

那么到底这些设置如何让Safari 知道?其实很简单,就一个meta,形如:

»阅读全部