文章源自:http://www.gbtags.com/gb/share/2046.htm

7个实用的Mobile移动相关HTML、CSS、JavaScript代码片段

移动HTML，CSS和JavaScript开发兴起若干年，如果你是这方面的开发者，肯定积攒了一些很棒的代码片段。可能有些已应用到程序开发中，有些可能可以保存到未来实用。在下面的文章中我将推荐7段非常实用的代码片段，或许可以运用到移动相关网站或HTML5应用程序中，希望大家喜欢！

 

风格选择背景

可能有的时候需要定制按钮来突出色彩使之更加匹配网站整体色调，或者全部删除，那么可以考虑使用如下代码：

/* 我们试试淡蓝色 */
html {
    -webkit-tap-highlight-color: rgba(201, 224, 253, 0.8);
}
 
/* 对于某些按钮或链接，简单隐藏所有选择色 */
.no-highlight {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

 

当你使用一个元素（例如阴影、滑动或按钮）来触发一些功能的时候，删除高亮是很有必要。

添加一个HTML5应用程序清单

Mozilla最新的基于HTML5移动操作系统——Firefox OS，将会给移动应用空间带来新的变革。再也不需要为每一个设备编写本地代码，再也不用依赖PhoneGap设备语言，更方便的是，基本上你所需要做的只是对现有的网站和网络应用是Firefox操作系统的应用程序，添加一个manifest.webapp文件到作用域，就像下面这样：

{
    "version": "1.0",
    "name": "Your App Name",
    "description": "Your new awesome HTML5-based mobile web app!",
    "launch_path": "/index.html",
    "icons": {
        "16": "/img/mylogo-16.png",
        "48": "/img/mylogo-48.png",
        "128": "/img/mylogo-128.png"
    },
    "developer": {
        "name": "Developer Name",
        "url": "http://yourawesomeapp.com"
    },
    "installs_allowed_from": ["*"],
    "locales": {
        "es": {
            "description": "Su nueva aplicación impresionante Open Web",
            "developer": {
                "url": "http://yourawesomeapp.com"
            }
        },
        "it": {
            "description": "Il vostro nuovo fantastico Open Web App",
            "developer": {
                "url": "http://yourawesomeapp.com"
            }
        }
    },
    "default_locale": "en"
}

 

再简单不过了！为了确保你的应用程序在线下使用不出问题，请包含HTML standard appcache。

防止页面缩放

有人说最佳实践是把移动页面进行缩放，但我反对这样做，在很多时候阻止页面缩放也很重要。一个HTML标签将提供完美的方法防止页面缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

 

只需要在页面HEAD添加这个标签，一切就设定好了。我自己的博客就使用这样方法，为了使页面在移动终端上呈现良好，我自定义了页面结构，更重要的是重设定了字体大小等等。

隐藏地址栏

其实这种方法很久以前就有人用到了。没有人愿意让他们的应用程序在浏览器中看起来像普通网页，还通过显示地址栏，所以你可以这样来隐藏地址栏：

// 准备好
window.addEventListener("load",function() {
    // 设定一个时限
    setTimeout(function(){
        // 隐藏地址栏
        window.scrollTo(0, 1);
    }, 0);
});

 

这个代码片段并不是在所有浏览器中都工作，但在大多数主流移动终端浏览器中能够良好运行。这段代码可以让网站在呈现感觉上体现出巨大的差异。

检测设备方向的改变

如果你需要在移动应用程序上使用绝对定位，或者只是想调整程序/网站的布局及元件位置，知道什么时候设备方向改变将是非常重要的一点。幸运的是利用一个事件能够达到目的：

//监听orientation改变
window.addEventListener("orientationchange", function() {
    // 发布新方向的数值
    console.log(window.orientation);
    // 0表示直立, 90表示水平旋转到左边, -90表示水平旋转到右边
}, false);

 

还有其他的方法能够检测方向改变，比如监听window.onresize事件或window.matchMedia检测，详见文章“如何检查移动设备方向改变”。但orientationChange对我们来说是最好用的。

WebKit CSS趣味

WebKit能够解析许多有趣的CSS属性，从呈现到具体功能实现都包含。下面就其中一写属性：

/* 当一个元素被触摸/长按时，不要让iOS"actions"对话框蹦出 */
.prevent-action {
    -webkit-touch-callout: none;
}
 
/* 全部元素无拖动 */
.content p.no-drag {
    -webkit-user-drag: none;
}
 
/* 拖动全部元素部分，但不包括文本/选项 */
.sidebar div.element-drag {
    -webkit-user-drag: element;
}
 
/* 改变特征来隐藏用户密码 */
input[type="password"] {
    -webkit-text-security: square;
}

 

iOS WebKit特殊的CSS属性目前来说是最有趣的，这些属性有很有用，并带有功能性，不单单为了展示。

启动图片选择器

有时候需要在移动设备上上传图片，最好的办法是通过以下HTML获取图像app启动器：

<input type="file" name="image" accept="image/*" capture>

 

上面的片段立即令用户进入相机拍照或对话框，你可以提供选择现有图像或采集一个新的图像。

上述提及的这几种用于定制和功能调整的小段代码能使你的应用程序或网页在可用性，功能性和优雅性方面体现出巨大的差异。如果你也有愿意分享的这类代码片段，欢迎在下方留言给我们！