之前为公司商旅频道写移动端的页面时遇到不少问题,今特来个总结,希望能为后来者带来一些帮助。
【不再考虑浏览器兼容性】
移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点。
当然,不同版本的Android是存在一些问题的,还有就是不同浏览器的版本也存在一些差别,IOS在这方面表现甚好。
所以在开发时我们只需使用Chrome进行调试即可,话说Chrome的开发者工具也是灰常不错的。
【丰富的页面Meta】
控制显示区域各种属性:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0" name="viewport">
width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
【IOS中Safari允许全屏浏览:】
<meta content="yes" name="apple-mobile-web-app-capable">
【IOS中Safari顶端状态条样式:】
<meta content="black" name="apple-mobile-web-app-status-bar-style">
【忽略将数字变为电话号码:】
<meta content="telephone=no" name="format-detection">
一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!
【IOS中Safari设置保存到桌面图标:】
这是IOS中Safari特有的meta,是在你保存某个页面到桌面的时候使用这张图作为桌面图标,so,尺寸和iphone上的一致,是57*57px
<link rel="apple-touch-icon" href="custom_icon.png">
【强大的CSS属性box-flex】
之所以将这块作为大栏目来讲,是因为这个属性非常有用,和之前开发win8 app时的grid非常相似。
box-flex的作用是按百分比划分兄弟相同标签的width,也就是当ul里有个两个li时,每个li会自动划分ul的宽度,如果box-flex:1;那么此时,li的width就是50%
box-flex用法实例1:
<ul>
<li>11111</li>
<li>2222222</li>
<li>333333333</li>
</ul>
ul{display: -webkit-box;}
ul li{-webkit-box-flex: 1;}
显示结果(需用webkit核浏览器查看,如Chrome,下同):
box-flex用法实例2:
<div class="demo02">
<input placeholder="百分百宽度输入框" type="text">
</div>
<style type="text/css">
.demo02{display: -webkit-box;}
.demo02 input{-webkit-box-flex: 1;width: 100%;
padding:4px;height:18px;line-height:18px;border-style: solid;
border-width: 1px;border-color: #ddd #ccc #ccc #ddd;}
</style>
.
分享到:
相关推荐
这些都反映了网站开发和维护团队的安全意识不足。 2. **漏洞修复**: - 对于弱口令问题,建议实施更为复杂的密码策略,并启用双因素认证。 - 对于SQL注入漏洞,应该采用参数化查询或ORM框架来避免直接拼接SQL语句...
本文将详述“liferay开发小记——开发环境的搭建”这一主题,旨在帮助开发者们快速有效地设置自己的开发环境,从而顺利进行Liferay插件或portlet的开发。 首先,我们需要了解Liferay开发的基础。Liferay提供了多种...
在“android开发小记”这个主题中,我们可以深入探讨Android应用程序开发的相关知识,特别是通过查看提供的压缩文件中的代码示例。这些文件名如lesson_8_code.zip至lesson_20_codel.zip,以及不同的Mp3Player版本,...
标题中的“Flex整合J2EE开发小记+源码下载”揭示了本次讨论的主题,即如何将Adobe Flex技术与Java企业版(J2EE)框架相结合进行应用开发,并且提供了相关的源代码供学习和参考。Flex是一种用于构建富互联网应用程序...
总结了短信协议cmpp、sgip、smgp等协议长短信开发要点
这份"java小记.rar"压缩包很可能包含了作者多年从事Java Web开发的经验总结,可能包括代码示例、笔记、最佳实践等内容。 在Java Web开发中,Servlet是核心部分,它是一个Java类,用于扩展服务器的功能,处理HTTP...
这篇小记主要关注了几个关键领域:持久层、MVC框架、视图层、JavaScript库以及缓存技术。下面将详细阐述这些知识点。 1. **持久层**: - **Hibernate**:是一个流行的ORM(对象关系映射)框架,允许开发者以面向...
1、树莓派3B+安装配置net-snmp,搭设snmp代理 2、snmp++库的编译 3、snmp++示例(v1~v3) 4、在学习中遇到的问题以及解决方式 5、开发工具的资源共享
谷歌Chrome浏览器扩展程序开发小记 本文主要介绍了谷歌Chrome浏览器扩展程序的开发过程,作者根据公司的规定,每月八小时,弹性工作制,需要计算工作时间,但是公司的考勤日历不太便捷,于是作者决定自己写一个...
一些常用的技术总结,包括java基础,android 基础知识。
关于C#后台转换sql数据问题 格式:Convert.TO(DBHelper(sql).table[0].toString());
在软件开发过程中,特别是Web应用开发中,经常会遇到修改代码后需要查看效果的情况。根据文档描述,对于不同类型的文件修改,有不同的处理方式: - **Java文件、XML文件、配置文件**:这些文件的修改通常涉及到了...
在Web开发中,Spring MVC是常用的控制器层框架,它提供模型-视图-控制器的设计模式,使前后端分离更加清晰。Spring MVC通过DispatcherServlet接收请求,Controller处理业务逻辑,Model管理数据,View负责渲染结果,...
在Python Django项目开发中使用Extjs时,开发者们可能会遇到各种各样的小错误或者问题。下面将详细地讨论其中的一些问题以及解决方法,涉及知识点包括Python Django框架、前端库Extjs以及一些常见的编程问题。 1. ...
环境: Linux s12084 2.6.9-67.ELsmp #1 SMP Wed ...小记一下。以备以后参考。 boost 库做得真好。在windows 平台, linux 平台下编译都很顺利。hp aCC 也宣称对 boost 1.35 完全支持 。 全部编译是很痛苦的过程