移动端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>

 



转载请注明:前端录»移动端Web开发小记

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=35-31-2"></script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机游戏获取服务器地址,vue获取服务器地址

vue获取服务器地址 内容精选换一换Atlas 500 Pro 智能边缘服务器(型号 3000)安装上架、服务器基础参数配置、安装操作系统等操作请参见《Atlas 500 Pro 智能边缘服务器 用户指南(型号 3000)》&#xff0c;安装操作系统完成后&#xff0c;配置业务网口IP地址&#xff0c;请参见配…

jar各个版本号的意义

jar版本号的意义&#xff1a; Alpha&#xff1a; Alpha是内部测试版,一般不向外部发布,会有很多Bug.除非你也是测试人员,否则不建议使用.是希腊字母的第一位,表示最初级的版本&#xff0c;alpha 就是α&#xff0c;beta 就是β &#xff0c;alpha 版就是比 beta 还早的测试版&a…

mysql用户及权限管理_MySQL 用户及权限管理

1.mysql用户的定义在mysql中&#xff0c;用户由用户名和主机域组成的。1.1 用户名的写法mysql> create user test1localhost;注意&#xff1a;用户名不要以数字、符号开头&#xff0c;如若一定要这么写&#xff0c;给用户名加上引号才能创建用户。1.2 用户中的主机域的写法单…

使用Selenium和HTML中的动态ID进行Java测试

Selenium最酷的方面之一是&#xff0c;您不仅可以使用网站进行录制&#xff0c;还可以将其实际用作junit测试。 首先&#xff0c;我将在Firefox中安装Selenium&#xff08;因为这是正式版本&#xff09;并进行快速测试。 重要的是要注意&#xff0c;Selenium将为您提供多种不同…

题解报告:hdu 1235 统计同成绩学生人数

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid1235 Problem Description 读入N名学生的成绩&#xff0c;将获得某一给定分数的学生人数输出。Input 测试输入包含若干测试用例&#xff0c;每个测试用例的格式为第1行&#xff1a;N第2行&#xff1a;N名学生的…

CSS的计数器:counter-increment与counter-reset

CSS Counters其实就是一计数器&#xff0c;早期在CSS中计数器仅存在于 ul 和 ol 元素。如果要使用在 div 这样的元素上&#xff0c;只能通过 list-style-image 或者是元素的 backgroud-image 来实现。在 CSS2.1的规范 中介绍了一种新技术&#xff0c;允许开发人员使用伪类 :aft…

查看表空间名称、大小、使用大小、剩余大小和使用率

查看表空间名称、大小、使用大小、剩余大小和使用率&#xff1a; SELECT a.tablespace_name "表空间名称", total / (1024 * 1024) "表空间大小(M)", free / (1024 * 1024) "表空间剩余大小(M)", (total - free) / (1024 * 1024 ) "表空…

编译安装PHP-7.2.8

一 下载并软件包 wget http://124.205.69.169/files/A218000006E9730A/cn2.php.net/distributions/php-7.2.8.tar.gz tar xf php-7.2.8.tar.gz cd php-7.2.8 二 安装依赖程序 yum -y install pcre pcre-devel openssl openssl-devel libicu-devel gcc gcc-c autoconf libjpeg l…

常用操作符

2 1. 转换类型数据&#xff0c;可以先定义一个数据&#xff0c;然后在采用调用的方法进行转换。 2. 进行查看相关数据&#xff0c;使用type类型数据进行查看&#xff0c;例如&#xff1a;type(**),然后就可以查到所属的类型了。但是对于单个字符来说&#xff0c;例如红线方…

重要通知,事关校营宝新老用户,敬请知悉!

尊敬的校营宝用户&#xff0c;感谢您选择校营宝培训学校管理系统&#xff0c;我们的发展离不开您的支持鼓励&#xff0c;只要您选择校营宝&#xff0c;就是我们的终身客户&#xff0c;我们承诺给您终身的售后咨询服务&#xff01; 校营宝培训学校管理系统是面向校外艺术类培训…

从条纹边框的实现谈盒子模型

类似下面这个图形&#xff0c;只使用一个标签&#xff0c;可以有多少种实现方式&#xff1a;(不考虑兼容性的情况下) 假设我们的单标签为 div : 定义如下通用 CSS: div{ position:relative; width: 180px; height: 180px; } NO.1 方案一&#xff1a;div上是棕色背景&#xf…

Android_(游戏)打飞机04:绘画敌机、添加子弹

(游戏)打飞机01&#xff1a;前言  传送门 (游戏)打飞机02&#xff1a;游戏背景滚动  传送门 (游戏)打飞机03&#xff1a;控制玩家飞机   传送门 (游戏)打飞机04&#xff1a;绘画敌机、添加子弹   传送门 (游戏)打飞机05&#xff1a;处理子弹&#xff0c;击中敌机&am…

递归问题

第一章递归问题 1.1 河内塔 n个圆盘移动从一个柱子借助一个柱子&#xff0c;移动到另一个柱子上的次数为 &#xff1a; 递推式&#xff1a;T(n)2*T(n-1)1 , n>0,T(0)0 归纳法得出&#xff1a;T(n)pow(2,n)-1 n>0 寻求封闭形式的表达式三个阶段&#xff1a; &#xff08;…

前端工程师的价值体现在哪里?

豆瓣前端: 认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容&#xff0c;解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的&#xff0c;多年使用的语言&#xff0c;作为开放标准…

Python3.6全栈开发实例[005]

5.接收两个数字参数&#xff0c;返回比较大的那个数字。 def compare(a,b):return a if a > b else b # 三元表达式 print(compare(20,100)) 转载于:https://www.cnblogs.com/apollo1616/p/9460493.html

验证码帮助类【CaptchaHelper 】

GDI&#xff1a;Graphics Device Interface Plus也就是图形设备接口,提供了各种丰富的图形图像处理功能;在C#.NET中&#xff0c;使用GDI处理二维&#xff08;2D&#xff09;的图形和图像&#xff0c;使用DirectX处理三维&#xff08;3D&#xff09;的图形图像, 图形图像处理用到…

关于HTML5本地持久化存储的Web SQL、Local Storage、Cookies技术

在浏览器客户端记录一些信息&#xff0c;有三种常用的Web数据持久化存储的方式&#xff0c;分别是Web SQL、Local Storage、Cookies。Web SQL作为html5本地数据库&#xff0c;可通过一套API来操纵客户端的数据库&#xff08;关系数据库&#xff09;&#xff0c;下面是支持浏览器…

死锁

7.1 系统模型 定义&#xff1a;多个进程竞争一定数量的资源&#xff0c;某个进程申请资源&#xff0c;若此时该资源不可用&#xff0c;则进程进入等待状态。若所申请的资源被其他等待进程占用&#xff0c;则该等待进程可能再也不法改变其状态。 进程使用资源的顺序&#xff1a;…

Linux启动/停止/重启Mysql数据库

1、查看mysql版本   1&#xff09;status;   2&#xff09;select version(); 2、Mysql启动 1&#xff09;使用 service 启动&#xff1a;   service mysqld start (5.0版本是mysqld)   service mysql start (5.5.7版本是mysql) 2&#xff09;使用 mysqld 脚本启动&…

mysql lepus_MySQL 监控软件lepus天兔

概述类别版本操作系统Centos 7.4数据库版本MySQL 5.6.49天兔版本lepus 3.7依赖软件1.MySQL 5.0及以上(必须,用来存储监控系统采集的数据)2.Apache 2.2及以上 (必须,WEB服务器运行服务器)3.PHP 5.3以上 (必须,提供WEB界面支持)4.Python2 (必须,推荐2.6及以上版本,执行数据采集和…