文章源自: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>
上面的片段立即令用户进入相机拍照或对话框,你可以提供选择现有图像或采集一个新的图像。
上述提及的这几种用于定制和功能调整的小段代码能使你的应用程序或网页在可用性,功能性和优雅性方面体现出巨大的差异。如果你也有愿意分享的这类代码片段,欢迎在下方留言给我们!
相关推荐
25、原生JavaScript格式化CSS样式代码 26、原生JavaScript压缩CSS样式代码 27、原生JavaScript获取当前路径 28、原生JavaScriptIP转成整型 29、原生JavaScript整型解析为IP地址 30、原生JavaScript实现checkbox全选...
是款很实用的CSS代码编辑修改工具。 Rapid CSS editor功能特点 快速,轻量轻 加载比任何其他具有类似的功能的CSS编辑器或IDE要快得多 强大的语法高亮 支持HTML,CSS,减,上海社会科学院,javascript的,php,...
MobDis 是一个基于 jQueryMobile 的移动站点构建器。 它针对设计师,拥有高度可视化的界面,可以快速轻松地布局移动网站。 但是,某些站点可能需要 MobDis 不提供的额外自定义。 因此 MobDis 提供了一个开发者控制台...
在HTML,CSS,JavaScript和jQuery中实现,用于UI设计和编程(CS422) 移动设备兼容性(不仅外观,而且游戏可以在移动设备上玩) 鼠标/触摸拖动以移动片段键盘快捷键: 按键:新游戏为“ n” 按键:“空格”用于显示...
吃豆人太太我仅使用Javascript,CSS和HTML构建了经典的吃豆人游戏的娱乐内容。 玩家在迷宫中导航吃豆人,以收集点,同时避开五颜六色的幽灵(眨眼,小指,墨黑和克莱德)。 如果他们成功收集了所有圆点,则玩家将...
第7章 向应用程序中加入Ajax 7.1 组合的技术 7.1.1 语义化XHTML和DOM 7.1.2 JavaScript和XMLHttpRequest对象 7.1.3 XML 7.1.4 一个可重用的对象 7.1.5 Ajax是正确的选择吗 7.2...
就额外的工具而言,可以使用代码验证器检查任何错误,编辑代码片段并更改代码格式,按各种标准对文本进行排序,进行代码转换(例如HTML到PHP,7位编码到字符),并在两个并排窗格之间同步滚动。 这些只是 ...
Android 一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导开发 IOS 由苹果公司开发的移动操作系统 Webkit 一个开源的浏览器引擎,在手机上的...
第7章 向应用程序中加入Ajax 7.1 组合的技术 7.1.1 语义化XHTML和DOM 7.1.2 JavaScript和XMLHttpRequest对象 7.1.3 XML 7.1.4 一个可重用的对象 7.1.5 Ajax是正确的选择吗 7.2...
第7章 向应用程序中加入Ajax 7.1 组合的技术 7.1.1 语义化XHTML和DOM 7.1.2 JavaScript和XMLHttpRequest对象 7.1.3 XML 7.1.4 一个可重用的对象 7.1.5 Ajax是正确的选择吗 7.2...
改进文档:所有文档以Markdown格式重写,添加了一些方便的插件组织示例和代码片段,文档使用起来会更方便,搜索的优化工作也在进行中。 更多变化:支持自定义窗体控件、空白和填充类,此外还包括新的实用程序类等。
dom-move 将子元素从 DOM 节点移动到另一个 dom 节点。用法 move ( source , destination ) ; source所有子节点都将被删除,并附加到destination 。 返回destination节点,因此您可以执行以下操作: var content = ...
padding:7px; border:solid 1px #c3c3c3; } <h3>Island Trading <button class="hide" type="button">Hide me <p>Contact: Helen Bennett Garden House Crowther Way London <h3>Paris ...
支持 HTML、CSS、Javascript、JSON、PHP、HTTP 和 bash 语法高亮 完全自定义颜色和样式 :artist_palette: 生成已在测试过的即用型 HTML 片段: 桌面 苹果邮件 8、9、10 展望 2003、2007、2010、2011、2013、2016 ...
♞JavaScript移动优先国际象棋客户端。 它是如何工作的? 游戏状态和游戏视图是分开的。 当状态改变时,视图会重新渲染。 投影用于验证移动是否合法。 向量用于平移片段的位置。 人工智能 使用 ,这是使用...
使用 Eruda,您可以显示 JavaScript 日志、检查 dom 状态、显示请求状态、显示 localStorage、cookie 信息、显示 url、用户代理信息、包括最常用的片段、Html、js、css 源查看器和安装。 JavaScript 文件非常大...
-Aurelia是一个适用于移动设备、桌面和网页的JavaScript客户端框架。它类似AngularJS,但更新、更符合标准,并采用模块化举措。Aurelia使用下一代ECMAScript编写。 -Vue.js(通常称为Vue)是一个用于构建用户界面的...
以下是产品组合的屏幕快照及其功能概述: 入门此项目中使用的语言和库: HTML CSS JavaScript Bootstrap 4.5安装-克隆仓库: git clone https://github.com/onomatopoetica/portabella-folio.git项目状态项目状态...
WebGL / Javascript实验 :test_tube: :microscope: ( :warning: 在制品)实验清单在此存储库中包含的实验列表下方,并托管在github页面上Three.js上面的实验是一个简单的顶点位移着色器和一个简单的高度片段着色器...
手机端程序员刷题你好,创业网站 这是 O'Reilly 书籍的网站和移动应用...:用于从在HTML片段组装静态HTML _layouts , _includes , _resources ,和_data 。 : 用于连接和缩小 CSS 和 JavaScript。 : 用于将静态 HTM