`

移动端Web开发小记

阅读更多

之前为公司商旅频道写移动端的页面时遇到不少问题,今特来个总结,希望能为后来者带来一些帮助。

 

【不再考虑浏览器兼容性】

移动端开发主要对象是手持设备,其中绝大部分是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>
 
.

 

 

分享到:
评论

相关推荐

    PHPweb渗透小记.docx

    这些都反映了网站开发和维护团队的安全意识不足。 2. **漏洞修复**: - 对于弱口令问题,建议实施更为复杂的密码策略,并启用双因素认证。 - 对于SQL注入漏洞,应该采用参数化查询或ORM框架来避免直接拼接SQL语句...

    liferay开发小记---开发环境的搭建

    本文将详述“liferay开发小记——开发环境的搭建”这一主题,旨在帮助开发者们快速有效地设置自己的开发环境,从而顺利进行Liferay插件或portlet的开发。 首先,我们需要了解Liferay开发的基础。Liferay提供了多种...

    javascript Dom开发小记

    web前端开发必备的技术,dom编程也是其中重点中的重点

    android开发小记

    在“android开发小记”这个主题中,我们可以深入探讨Android应用程序开发的相关知识,特别是通过查看提供的压缩文件中的代码示例。这些文件名如lesson_8_code.zip至lesson_20_codel.zip,以及不同的Mp3Player版本,...

    Flex整合J2EE开发小记+源码下载

    标题中的“Flex整合J2EE开发小记+源码下载”揭示了本次讨论的主题,即如何将Adobe Flex技术与Java企业版(J2EE)框架相结合进行应用开发,并且提供了相关的源代码供学习和参考。Flex是一种用于构建富互联网应用程序...

    短信协议开发小记

    总结了短信协议cmpp、sgip、smgp等协议长短信开发要点

    java小记.rar

    这份"java小记.rar"压缩包很可能包含了作者多年从事Java Web开发的经验总结,可能包括代码示例、笔记、最佳实践等内容。 在Java Web开发中,Servlet是核心部分,它是一个Java类,用于扩展服务器的功能,处理HTTP...

    J2EE开发之常用开源项目小记

    这篇小记主要关注了几个关键领域:持久层、MVC框架、视图层、JavaScript库以及缓存技术。下面将详细阐述这些知识点。 1. **持久层**: - **Hibernate**:是一个流行的ORM(对象关系映射)框架,允许开发者以面向...

    snmp开发小记

    1、树莓派3B+安装配置net-snmp,搭设snmp代理 2、snmp++库的编译 3、snmp++示例(v1~v3) 4、在学习中遇到的问题以及解决方式 5、开发工具的资源共享

    谷歌Chrome浏览器扩展程序开发小记

    谷歌Chrome浏览器扩展程序开发小记 本文主要介绍了谷歌Chrome浏览器扩展程序的开发过程,作者根据公司的规定,每月八小时,弹性工作制,需要计算工作时间,但是公司的考勤日历不太便捷,于是作者决定自己写一个...

    android 开发小记

    一些常用的技术总结,包括java基础,android 基础知识。

    开发经验小记.txt

    关于C#后台转换sql数据问题 格式:Convert.TO(DBHelper(sql).table[0].toString());

    开发细节小记

    在软件开发过程中,特别是Web应用开发中,经常会遇到修改代码后需要查看效果的情况。根据文档描述,对于不同类型的文件修改,有不同的处理方式: - **Java文件、XML文件、配置文件**:这些文件的修改通常涉及到了...

    spring 小记

    在Web开发中,Spring MVC是常用的控制器层框架,它提供模型-视图-控制器的设计模式,使前后端分离更加清晰。Spring MVC通过DispatcherServlet接收请求,Controller处理业务逻辑,Model管理数据,View负责渲染结果,...

    Python django Extjs 项目开发中的错误小记

    在Python Django项目开发中使用Extjs时,开发者们可能会遇到各种各样的小错误或者问题。下面将详细地讨论其中的一些问题以及解决方法,涉及知识点包括Python Django框架、前端库Extjs以及一些常见的编程问题。 1. ...

    Linux boost库安装、编译问题小记

    环境: Linux s12084 2.6.9-67.ELsmp #1 SMP Wed ...小记一下。以备以后参考。  boost 库做得真好。在windows 平台, linux 平台下编译都很顺利。hp aCC 也宣称对 boost 1.35 完全支持 。  全部编译是很痛苦的过程

Global site tag (gtag.js) - Google Analytics