移动端开发（Html+Css）

placeholder自定义

input::-webkit-input-placeholder {
    color: #999;
}
input:-ms-input-placeholder { // IE10+
    color: #999;
}
input:-moz-placeholder { // Firefox4-18
    color: #999;
}
input::-moz-placeholder { // Firefox19+
    color: #999;
}

移动端适配CSS方案

<!--移动端网页点击链接出现蓝色背景修复-->
*{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

移动端适配方案一

font-size可能需要额外的媒介查询，并且font-size不能使用rem,即除了font-size之外的其它css尺寸都使用了rem作为单位。

• 视口设置

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

• 设置font-size大小

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

单行文字多余部分用...代替

{
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

多行文字多余部分用...代替

{
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

自定义字体@font-face

@font-face {
      font-family: 'wxQK';
      src: url('./static/wxQK.eot');
      src:
        url('./static/wxQK.eot?#font-spider') format('embedded-opentype'),
        url('./static/wxQK.woff') format('woff'),
        url('./static/wxQK.ttf') format('truetype'),
        url('./static/wxQK.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }

• 安装插件 npm install font-spider -g
• 生成依赖文件 font-spider *.html
• 参考 http://font-spider.org/

用CSS开启硬件加速来提高网站性能

.className {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

webkit浏览器中另一个行之有效的方法

.className {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

参考

屏幕旋转的事件和样式

• 事件

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}

• 样式

<!--竖屏时使用的样式-->
@media all and (orientation:portrait) {
.css{}
}

<!--横屏时使用的样式-->
@media all and (orientation:landscape) {
.css{}
}

H5去掉input输入框后面的叉

input::-ms-clear{
    display: none;
}
input::-webkit-search-cancel-button{
    display: none;
} 

H5页面弹出带搜索确认键的键盘

经测试发现需要一下组合，可以使呼起的键盘具有“搜索”或“前往”字样。

1. <form> 标签需要具有 action属性
2. <input> 标签需要设置 type="search"

如下：

<form action="#"> <input type="search" /> </form>