1、要保证页面在手机中正常显示,需要在<head>标签内添加如下语句:
<meta name="viewport" content="width=480, target-densitydpi=high-dpi, user-scalable=no" />
2、一些css中需要注意的设置:
html{height:100%;}
body{min-height:100%;position:relative;}
3、表单元素在手机中点击时会出现边框,取消边框的写法如下:
input, textarea, button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
4、背景图片background中,0 0 位置值是默认值,可以省略不写;repeat双方向重复也是默认值,也可以不写;位置值中的“bottom”、“right”可以使用“100%”来替代,以此减少代码量。如下:
div{background:url(pic.png) 0 0 repeat;}简写为div{background:url(pic.png);}
5、box-sizing:border-box时,表示width值包含了border和padding的值。默认是不包含的。
6、border-radius设置圆角,可依次设置四个方向的圆角大小,顺序从左上角按顺时针旋转。如:
.class{border-radius:0 0 5px 5px}设置的是一个上边直角,下边5像素圆角的元素。
7、在手机中的颜色渐变写法:(只考虑webkit)
background-image:-webkit-gradient(linear,0 0,0 100%,from(#f3b787),to(#e39e61));
background-image:-webkit-linear-gradient(top,#f3b787,#e39e61);
8、内外阴影同时存在的写法:
-webkit-box-shadow:1px 1px 1px #FFF inset,1px 1px 2px #ded5ba;
注意:内外阴影同属于同一个css属性(box-shadow),因此要写在同一句box-shadow里面,值用逗号分隔。内阴影是inset,外阴影为默认,不需要写outset,写了outset反而不起作用了。
9、双层边框的写法,可以使用内阴影来实现。有些按钮除了有外边框线之外,还会在边框线内有一条1px大小的较亮的边框线来提升按钮视觉感受。此时要实现这条亮框线,就可以使用内阴影来实现,具体写法如下:
-webkit-box-shadow:1px 1px 1px #FFF inset, -1px -1px 1px #FFF inset;
值分别表示:水平方向位移、竖直方向位移、阴影大小、阴影颜色、内阴影。
要实现四个方向的内阴影,就要写两个值,一个是实现右下,一个实现左上。
10、按钮被按下的瞬间的状态效果,使用 .btn:active{…}的写法。但目前在手机上不支持该效果。解决方案尚未找到。。。
11、对话气泡的写法:一个气泡写成一个单独的HTML文件,气泡的上下边框和背景都需要图片样式来实现的时候,可以考虑对<html>写样式,将其中一部分图片样式写到<html>中,另一些样式写在<body>中,最后一些样式写在<div>中,这样可以减少div的嵌套层数。
12、手机页面中的文字大小使用pt作为单位:.class{font-size:18pt;}具体大小需要用手机测试来确定最终效果。
13、为了减少http响应,要尽量使用CSS Sprites。但不是所有图片都可以拼合进去。
元素宽度自适应
之前做pc端的时候写过一篇宽度自适应的文章完美实现两个div并排且宽度为50%,不足的是不灵活,如果一行元素由3个变成2个,为了改变样式就需要一定的判断了。现在有了display:box,一切就变得简单了。
parent {display : box;}
children {box-flex : 1;}
*需要自适应的子元素必须是display:block or box,否则无效
*若需子元素间保持宽度一致,需设置width:100%
单行文本溢出显示…
element{text-overflow : ellipsis;white-space : nowrap;overflow : hidden;}
多行文本溢出显示…
element{-webkit-line-clamp : 2;box-orient : vertical;}
*元素必须是display:box,否则无效
文字水平垂直居中
element{box-pack : center;box-align : center;}
*元素必须是display:box,否则无效
图片水平垂直居中
一开始我认为通过设置display:table-cell,加上vertical-align:middle就可以解决垂直居中的问题,但是后来发现改变了display后会影响到本身的布局了,所以推荐下面这种方式。
img vertical-align : middle;
parent : after{
content : " ";
visibility : hidden;
display : inline-block;
height : 100%;
vertical-align : middle;
}
手机上的点击反馈
去掉浏览器默认的反馈,-webkit-tap-highlight-color : rgba(0,0,0,0);
*不需要点击反馈,不用a标签(UC下问题);
*使用了delegate,建议使用a或者button;
*ipad下必须设置在绑定事件的元素上。
transform闪动问题
parent {-webkit-backface-visibility : hidden;}
children {-webkit-transform-style : preserve-3d;}
*android下会出现一些问题(click失效、input重影等);
*可使用-webkit-transform : translate3d(0,0,0)替代。
相关推荐
PhoneGap-TestApp-源码.rar
cordova扫码插件phonegap-plugin-barcodescanner,修复了在ios10上面的内存泄漏导致的闪退bug
phonegap-phonegap-1.8.1-0-gce32a3f.zip
phonegap-phonegap-1.0.0-0-g80cc6dd.zip
jpush-phonegap-plugin 官网上下载的 。。。。。。。。
phonegap-cli, PhoneGap和 PhoneGap/构建 命令行 接口 PhoneGap命令行接口和 node.js 库。命令行命令行要求安装 node.js 版本 >=4.0.0安装 iOS sim 将应用程序部署到iOS模拟器。安装$ npm install
win目录在电脑上安装,app在手机上安装。 安装后,把win中的案例解压,创建项目时候选择此项目,然后手机上输入电脑上提示的地址就可以测试了,例如我的:http://192.168.1.8:3000/。 经过我测试正常,如果错误那...
phonegap-android开发,最新版本的phonegap
phonegap-1.8.0-0 phonegap-1.8.0-0
Download and install our new PhoneGap Desktop app, which is currently in beta.
Phonegap LocalNotification 安卓 消息推送
PhoneGap Android is an Android application library that allows for PhoneGap-based projects to be built for the Android Platform. PhoneGap-based applications are, at the core, an application written in...
phoneGap win桌面应用,由于在官网极度难以下载,总心失败告终,所以在此共享下。
ionic2 极光推送插件
phonegap-android-master
FreakDev-PhoneGap-Android-HTML5-WebSocket
最新版本的phonegap-2.9.1是没有cordova-2.9.1.jar的,这里打包好给大家。
websocket-android-phonegap-master
PhoneGap Desktop-App可以在不搭建andrid 环境 不配置android sdk 或者不搭建xcode环境,或者不安装 node.js npm 的情况下就可以创建phoengap应用
phoneGap-android实现拍照和选择图库中的图片功能。绝对可以运行。