开发工具:Visual Studio Code及相关插件安装
Easy LESS 当保存.less文件时自动生成.css文件
Less IntelliSense .less文件的自动提示功能
Beautify css/sass/scss/less 样式文件格式化功能
Live HTML Previewer html预览功能
HTML Snippets html标签自动完成功能
JS-CSS-HTML Formatter html格式化功能
<!DOCTYPE html>
<html manifest="test.manifest">
<!--
CACHE MANIFEST
#我是注释,这个文件名叫test.manifest
CACHE:
/test.css
/test.js
-->
<head>
<meta charset="utf-8"/>
//自动适屏
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
//禁止 iOS 识别长串数字为电话
<meta name="format-detection" content="telephone=no" />
<!--<a href="tel:4008106999,1034">400-810-6999 转 1034</a>-->
<!--<a href="sms:139xxxxxxx">一键发送短信</a>-->
//不让安卓手机识别邮箱
<meta name="format-detection" content="email=no" />
<!--<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>-->
//地址识别
<meta name="format-detection" content="adress=no" />
<!--苹果safari特有属性-->
//全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" />
//顶部状态栏背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//设置缓存
<meta http-equiv="Cache-Control" content="no-cache" />
//图标
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
<!--QQ浏览器特有属性-->
//全屏模式
<meta name="x5-fullscreen" content="true"/>
//强制竖屏
<meta name="x5-orientation" content="portrait"/>
//强制横屏
<meta name="x5-orientation" content="landscape"/>
//应用模式
<meta name="x5-page-mode" content="app"/>
<!--UC浏览器特有属性-->
//全屏模式
<meta name="full-screen" content="yes"/>
//强制竖屏
<meta name="screen-orientation" content="portrait"/>
//强制横屏
<meta name="screen-orientation" content="landscape"/>
//应用模式
<meta name="browsermode" content="application"/>
</head>
<body>
</body>
</html>
常用布局方式:
1.流式布局+百分比 float:left , float:right center:100%;
一般手机端布局分为上(header)中(center)h和下(footer)三部分
常见布局:
header部分height:45px;width:100%;
position:fixed;
top:0;
left:0;
center部分:position:fixed
top:45px;
bottom:45px
footer部分:
bottom:0;
left:0;
2.弹性盒布局 display:flex;
任何一个容器都可以指定为Flex布局。
.box{display: flex;}
行内元素也可以使用Flex布局。
.box{ display: inline-flex;}
Webkit内核的浏览器,必须加上-webkit前缀。
.box{ display: -webkit-flex; /* Safari */
display: flex;}
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
3.rem 布局 font-size:1rem;
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
这是rem布局的核心代码,
这段代码的大意是:如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)
于是,问题来了,为什么要这样?别急,我先来一一回答
1. 为什么是640px?
对于手机屏幕来说,640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。
如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为640 x 1136px,而它的CSS逻辑像素数为320 x 568px。
如果要切移动端页面,你可以先把效果图宽度等比例缩放到640px,很好用。
2. 为什么要设置html的font-size?
rem就是根元素(即:html)的字体大小。html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-size。甚至,left,top等)你都可以放心大胆的用rem作单位。
如果你把html的font-size设为20px,前面说过,rem就是html的字体大小,那么1rem = 20px。此时,此时宽60px,高40px的元素样式就这样设置如下 ↓
3. width: 3rem; height: 2rem;
那要是宽55px,高37px呢?然后经过换算,,设置如下 ↓
width: 2.75rem;
height: 1.85rem;
是不是发现这换算起来有点麻烦啊,,,(当然,你要是心算帝请无视)
如果我们一开始把html的font-size设为100px呢?此时1rem = 100px,那么上面的宽55px,高37px的元素样式就可以这么设置 ↓
width: 0.55rem;
height: 0.37rem;
是不是换算起来简单多了?!
4.百分比布局 width:50%;
百分比布局就是在项目中所有元素的宽高都不设置固定大小,而是用百分比来控制其大小
div{width:25%;heigt:20%;}
美工出图原则:
分辨率宽度:
320 480 640 960 1280 1600 1920 (web分辨率均为320[320*480])
360 720 1080 1440 1800 (web分辨率均为360[360*640])
因此有两套思路:
第一种是制作1920的psd图,然后导出320的jpg或bmp图。
其中的1920是320的6倍,然后高度,宽度百分比均从320上切取。
新建文档时1920*2880=(320*6)*(480*6);单位像素。
分辨率为432=(72*6);单位像素/英寸;
颜色模式:RGB颜色;
alt+ctrl+i 可调整图像大小及分辨率
第二种是制作1440的psd图,然后导出360的图。
其中1440是360的4倍,然后图片均从360上切取。
新建文档时1440是360的4倍,,然后高度,宽度百分比均从360上切取。
分辨率为288=(72*4);单位像素/英寸;
颜色模式:RGB颜色;
alt+ctrl+i 可调整图像大小及分辨率
第三种是制作宽度为320的图,并让其居中。所有的图片,大小,均按固定的来。
这样做的好处是兼容性强,且对前端的要求不高。
不过坏处是在某些分辨率下虽然布局不会乱,但看上去效果可能不太理想。
一般美工设计原则如下:
1.字体一般使用10px到16px,字体大小偶数,特殊情况下需要特小字体的也可选用8px字体。
因为在480px及720px屏上实际显示的字体大小为16px,并不会出现字体显示不清晰的问题;
2.颜色一般选择
对于黑白色,做为字体色及边框色时,仅能选择如下几种:
#ffffff;
#cccccc;
#999999;
#666666;
#333333;
#000000;
因为字体和边框只能使用web色,而web色仅有216种,其中以上6种为非彩色。
其它地方均可以采用真彩色(8+8+8=24位),即2的24次方,1677万种颜色。
因此在设计某些颜色时,如果背景和某种字体颜色相同,但显示出的颜色却不一样。
是因为psd中字体的真彩色转换为html时被浏览器转换成了颜色值较少的web色。
3.尽量不要使用过渡色,使用平面设计
因为大量的过渡色,非常消耗手机的cpu,只有3d效果浏览器会用gpu(显卡)渲染。
也就是说,只所以手机采用平面化设计是因为手机性能的原因。
4.关于优化:
a.联通3g下载速度为338kb/s,因此一个UI图中所有图片的大小不能超过1mb.因此图片宽度不要超过640px
b.css3>svg>iconfont>webp>png8>gif>jpg
c.合并小图片,把固定大小的图标放入单一png中。
d.不要使用除微软件雅黑之外的非图片字体。
//盒子模型
┌────────────────────────────────────────────────┐
│ margin 15px │
│ ┌──────────────────────────────────────┐ │
│ │ border 1px │ │
│ │ ┌────────────────────────────┐ │ │
│ │ │ padding 4px │ │ │
│ │ │ ┌────────────────────┐ │ │ │
│10px│ 1px│4px│ 200px*40px │4px│ 1px│10px│
│ │ │ └────────────────────┘ │ │ │
│ │ │ 4px; │ │ │
│ │ └────────────────────────────┘ │ │
│ │ 1px │ │
│ └──────────────────────────────────────┘ │
│ 15px │
└────────────────────────────────────────────────┘
width:200px+4px*2+1px*2=200px+8px+2px=210px;
height:40px+4px*2+1px*2=40px+8px+2px=50px;
margin-top:15px;
margin-left:10/360*100%;
padding-left:4/360*100%;
border:1px;
width:210/360*100%;
光标bug:
input
height:20px;
padding-top:4px;
padding-bottom:4px;
font-size:12px;
height = padding-top + font-size + padding-bottom;
此时光标在任意浏览器下高度与字体高度相同
┌────────────────────────────┐0
│ padding-top:4px; │
│ 4 ┌────────────────────┐ 4 │4
│ p │ height:12px │ p │
│ x └────────────────────┘ x │16
│ padding-bottom:4px; │
└────────────────────────────┘20
其它细节重置:
letter-spacing: 0;
word-spacing: 0;
text-indent: 0;
text-shadow: none;
1.水平按百分比计算
2.垂直按像素计算
div
┌────────────────────────────┐0
│ padding-top:4px; │
│ 4 ┌────────────┐┌──────┐ 4 │4
│ p │ div1 ││ div2 │ p │
│ x └────────────┘└──────┘ x │16
│ padding-bottom:4px; │
└────────────────────────────┘20
0 4 div1 66 div2 96 100
div
{
width:100%;
height:20px;
padding-left:4/100*100%;
padding-right:4/100*100%;
padding-top:4px;
padding-bottom:4px;
}
div1{
width:(66-44)/100*100%;
height:20px;
}
div2
{
width:(96-66)/100*100%;
height:20px;
}
整体间距:10px,15px,20px
┌────────────────────────────┐0
│ padding-top:15px; │
│10 ┌────────────┐┌──────┐10 │4
│ p │ div1 ││ div2 │ p │
│ x └────────────┘└──────┘ x │16
│ padding-bottom:15px; │
└────────────────────────────┘20
整体内容边距
10px 2.7777%
字体padding
6px 1.6666%
10px 2.7777%
12px 3.3333%
15px 4.1666%
16px 4.4444%
20px 5.5555%
28px 7.7777%
30px 8.3333%
40px 1.1111%
60px 16.6666%
300px 83.3333%
320px 88.8888%
less下颜色命名:(web色)
@color-样式名-颜色名:颜色值;
@color-background:#f5f5f5;
@color-border: #cccccc;
@color-font-blue:#0099cc;
@color-font-black:#1b1b1b;
@color-font-gray-light:#999999;
@color-font-gray:#999999;
@color-font-orange:#ff9900;
常用边距:
//margin-组件名-位置
@margin-panel-top;
@margin-card-top;
@margin-list-top;
//组件名:panel,view,card,list
//方向,left,right,top,bottom
@padding-text-left;
//horizontal:水平
@padding-text-horizontal;
//垂直
@padding-text-vertical;
背景图大小
340*200
小图:386积分
70*30
标题高度:40px
小框:查看更多
80*25
图片大小
132*132
340*200
1.样式文件,防止加载编码出错。
@charset "UTF-8";
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}
//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}
//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}
//禁止文本缩放,当仅采用竖屏时才会遇到字体分辨率重新调整的问题。
html {
-webkit-text-size-adjust: 100%;
}
动画效果中,使用 translate 比使用定位性能高
//滚动中加入以下样式。
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
//更改输入框placeholder的颜色
input::input-placeholder{color:#1b9dc7;}
input::-webkit-input-placeholder{color:#1b9dc7;}
input::-o-input-placeholder{color:#1b9dc7;} 设置input里placeholder的字体颜色 属性
input::-ms-input-placeholder{color:#1b9dc7;}
input::-moz-input-placeholder{color:#1b9dc7;}
//关闭iOS键盘首字母自动大写
<input type="text" autocapitalize="off" />
//去掉数字输入框的上下箭头
input[type=number] {-moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{-webkit-appearance: none; margin: 0; }
//android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
//ios和android下触摸元素时出现半透明灰色遮罩
E {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
//消除transition闪屏
E {
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-transform-style: preserve-3d;
/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
-webkit-backface-visibility: hidden;
}
//启用3D加速
E {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
//GPU加速
CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video来触发GPU渲染
//长时间按住页面出现闪退
E {
-webkit-touch-callout: none;
}
//手机拍照和上传图片
<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
<input type="text"/>
输入框:
-webkit-appearance:none;//iphone下去掉边框阴影
-webkit-tap-highlight-color:transparent;//去掉高亮背景
-webkit-user-select: text;//显示输入的文字
一.文件命名规范
全局样式:global.css;
框架布局/布局,版面:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
主要的master.css
专栏columns.css
主题themes.css
……
二.常用类/ID命名规范
页 眉:header
内 容:content
容 器:container
页 脚:footer
版 权:copyright
导 航:menu
主导航:mainMenu / mainnav
子导航:subMenu / subnav
标 志:logo
标 语:banner
标 题:title
商 标:label
侧边栏:sidebar
图 标:Icon
注 释:note
搜 索:search
按 钮:btn
登 录:login
链 接:link
信息框:manage
外 套:wrap
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
标 语\广告:banner
菜单内容1:menu1 content
菜单容量:menu container
子菜单: submenu
边导航图标:sidebarIcon
注释: note
面包屑: breadcrumb(即页面所处位置导航提示)
容器: container
内容: content
搜索: search
登陆: Login
功能区: shop(如购物车,收银台)
当前的 current
NameName
name_name
1440 1080 720 480 360 320
搭建html开发平台(Visual Studio Code及相关插件安装.)
手机端浏览器分辨率市场调研
搭建SVN及测试服务器
安装less及指定使用方式。
UI基本尺寸确立
UI基本颜色及布局确定
动态效果设计
首页模板
测图软件MarkMan的使用
基本框架搭建
手机端测试
制定开发标准,以及自适应解决方案。
制定CSS样式命名方式。
苹果ID审请
域名购买及云服务器设计
带领团队,适应新的开发模式。
测试页面的检查,以及相关前端问题的解决。
常见问题
1、移动端如何定义字体font-family
三大手机系统的字体:
ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体
各个手机系统有自己的默认字体,且都不支持微软雅黑
如无特殊需求,手机端无需定义中文字体,使用系统默认
英文字体和数字字体可使用 Helvetica ,三种系统都支持
1、 移动端定义字体的代码 */
body{font-family:Helvetica;}
2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
3、webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}
4、webkit表单输入框placeholder的颜色值能改变么
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
5、webkit表单输入框placeholder的文字能换行么
ios可以,android不行~
6. 关闭iOS键盘首字母自动大写
在iOS中,默认情况下键盘是开启首字母大写的功能的,如果启用这个功能,可以这样:
<input type="text" autocapitalize="off" />
7. 关闭iOS输入自动修正
和英文输入默认自动首字母大写那样,IOS还做了一个功能,默认输入法会开启自动修正输入内容,这样的话,用户经常要操作两次。如果不希望开启此功能,我们可以通过input标签属性来关闭掉:
<input type="text" autocorrect="off" />
8. 禁止文本缩放
当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:
html {-webkit-text-size-adjust: 100%}
需要注意的是,PC端的该属性已经被移除,该属性在移动端要生效,必须设置 `meta viewport’。
9. 移动端如何清除输入框内阴影
在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */}
10. 快速回弹滚动
我们先来看看回弹滚动在手机浏览器发展的历史:
早期的时候,移动端的浏览器都不支持非body元素的滚动条,所以一般都借助 iScroll;
Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动;
Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果,不过随后这个特性又被移除;
iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做:
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
PS:iScroll用过之后感觉不是很好,有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D),而且还有回弹滚动的内置滚动条,官方地址:
iDangero
11.禁止复制该文本 如果用户可以选择,则给用户以网页的感觉,App高大上的感觉就出不来了
test{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;}
12. 移动端取消touch高亮效果
在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
但这个方法在三星的机子上无效,有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,可以解决这个问题。
13. 如何禁止保存或拷贝图像(IOS)
通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:
img { -webkit-touch-callout: none; }
14、假如手机网站不用兼容IE浏览器,一般我们会使用zeptojs。
zeptojs内置Touch events方法,具体可以看http://zeptojs.com/#Touch events
看了一下zeptio新版的API,已经支持IE10以上浏览器,对zeptojs可以选择使用!
15、防止手机中网页放大和缩小。
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。
16、apple-mobile-web-app-capable
apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
17、format-detection
format-detection 启动或禁用自动识别页面中的电话号码。
语法:
说明:
默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
18、Html5调用安卓或者iOS的拨号功能
<a href="tel:13638657008">13638657008</a>
<a href="sms:139xxxxxxx">一键发送短信</a>
19、html5GPS定位功能
具体请看:http://www.w3school.com.cn/html5/html_5_geolocation.asp
20、上下拉动滚动条时卡顿、慢 Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
21、长时间按住页面出现闪退
element { -webkit-touch-callout: none;}
22、iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance: none;
}
23、ios和android下触摸元素时出现半透明灰色遮罩
Element { -webkit-tap-highlight-color:rgba(255,255,255,0)}
24、active兼容处理 即 伪类 :active 失效
方法一:body添加ontouchstart
方法二:js给 document 绑定 touchstart 或 touchend 事件
a {color: #000;}
a:active {color: #fff;}
bar
document.addEventListener('touchstart',function(){},false);
25、动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
26、Retina屏的1px边框
Element{
border-width: thin;
}
27、webkit mask 兼容处理
某些低端手机不支持CSS3 mask,可以选择性的降级处理。
比如可以使用js判断来引用不同class:
if( ‘WebkitMask’ in document.documentElement.style){
alert(‘支持mask’);
} else {
alert(‘不支持mask’);
}
27、浏览器私有及其它meta
以下属性在项目中没有应用过,可以写一个demo测试以下!
QQ浏览器私有
全屏模式
<meta name="x5-fullscreen" content="true">
强制竖屏
<meta name="x5-orientation" content="portrait">
强制横屏
<meta name="x5-orientation" content="landscape">
应用模式
<meta name="x5-page-mode" content="app">
UC浏览器私有
全屏模式
<meta name="full-screen" content="yes">
强制竖屏
<meta name="screen-orientation" content="portrait">
强制横屏
<meta name="screen-orientation" content="landscape">
应用模式
<meta name="browsermode" content="application">
其它
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
<meta name="HandheldFriendly" content="true">
微软的老式浏览器
<meta name="MobileOptimized" content="320">
windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">
29、旋转屏幕时,字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
30、transition闪屏
/设置内嵌的元素在 3D 空间如何呈现:保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /
-webkit-backface-visibility:hidden;
31、圆角bug 某些Android手机圆角失效
background-clip: padding-box;
32、顶部状态栏背景色
说明:
除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。
如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。
如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。
默认值是default。
33、ios 设置input 按钮样式会被默认样式覆盖
解决方式如下:
input,
textarea {
border: 0;
-webkit-appearance: none;
}
34.安卓里有一像素白边问题
图片描述
像这个结构可以用dl dd dt 结构写,dl的width可以有两种设置的方法:
(1)width:100%;(2)width:94%;pading:3%;
以上两种设置宽度的方式都可以,但是第二种会出现1像素白边的问题,所以建议用第一种,
边距在dd,dt里设置这个问题只有在安卓里才出现的,用谷歌里的模拟器测不出来,只有用手机才能看出来,
我用三星小米的手机都测出有这个问题
35.手机端去掉点击时默认的边框
*:focus {outline: none;}
* { -webkit-tap-highlight-color: trans
36、苹果手机的一些设置。
<meta name="apple-mobile-web-app-capable" content="yes">
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。
你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
37、format-detection设置。
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
format-detection 启动或禁用自动识别页面中的电话号码、邮箱地址。
38、ios和android下触摸元素时出现半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
39、动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意:3D变形会消耗更多的内存与功耗
40、旋转屏幕时,字体大小调整的问题
*{
-webkit-text-size-adjust:100%;
}
41、IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!
解决方法:可以用html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById(‘testInput‘).addEventListener(‘input‘, function(e){
var value = e.target.value;
});
</script>
42、图片无法正常加载时 用默认图片替代的功能
<img src="img/1.jpg" onerror = "javascript:this.src= 'img/default.png';" >
43、 禁止鼠标右键
<img src="img/1.jpg" oncontextmenu = "return false" >
44. audio元素和video元素在ios和andriod中无法自动播放
$('html').one('touchstart',function(){
audio.play()
})
网友评论