touchapp1--固定头部和底部

时间 2019-11-21

标签 touchapp1 touchapp 固定头部底部繁體版

原文原文链接

1. touchapp结构

固定头部（header)
内容区 (content)
固定脚步(footer)

头部和脚步通常有四个tab（图标和文字），固定死的绝对定位
内容区通常能够上下滑动

头部和脚部通常为固定的部分，作成统一模板（全部页面共有的）的部分.html

头部的图标用图片仍是字体
怎么自适应字体和布局

2. 头部制做

2.1 meta的书写

<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="yes"  />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no">
	<title>xxxx</title>
	<link rel="apple-touch-icon-precomposed" href="images/haoroomsicon.jpg" />
	<link rel="apple-touch-startup-image" href="images/haoroomsicon.jpg" />

viewport

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>

width=device-width   宽度是设备屏幕的宽度（像素）
height=device-height 高度是设备屏幕的高度（像素）
initial-scale     初始的缩放比例 
minimum-scale     容许用户缩放到的最小比例
maximum-scale     容许用户缩放到的最大比例
user-scalable     用户是否能够手动缩放

Format-detection （禁止识别）

format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有如下几个设置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也能够连写：meta name="format-detection" content="telephone=no,email=no,adress=no"

若是禁用，咱们调用拨号功能能够这么写！

以下：
<ahref="tel:4008106999,1034">400-810-6999 转 1034</a>
拨打手机直接以下
  <a  href="tel:15677776767">点击拨打15677776767</a>

http-equiv

http-equiv顾名思义，至关于http的文件头做用，它能够向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞；android

这个属性是很老的属性了，通常手机网页都是要有必定缓存的ios

3. IOS私有meta属性

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

一、第一个meta：web

<meta name="apple-mobile-web-app-capable" content="yes" />

说明：浏览器

网站开启对web app程序的支持。若是content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你能够经过只读属性window.navigator.standalone来肯定网页是否以全屏模式显示。缓存

还有一个全屏显示的属性就是：app

为了更好的兼容，两个meta能够都写上！iphone

二、第二个meta：布局

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明：字体

在web app应用下状态条（屏幕顶部条）的颜色；
默认值为default（白色），能够定为black（黑色）和black-translucent（灰色半透明）。
注意：
若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

3.1 主屏

添加主屏以后，桌面图片和启动画面如何设置呢？

桌面图标设置：

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />

二者的区别以下：第一种会有一个光感，第二种是设计原图显示！

启动画面的设置：

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

固然，能够指定不一样尺寸。

4. 关于样式

一、上下拉动滚动条时卡顿、慢

body {
       -webkit-overflow-scrolling: touch; 
       overflow-scrolling: touch; 
}
```

二、禁止复制、选中文本
```
Element {
       -webkit-user-select: none; 
       -moz-user-select: none; 
       -khtml-user-select: none; 
         user-select: none; 
}
```
解决移动设备可选中页面文本(视产品须要而定)


三、长时间按住页面出现闪退
```
element {
       -webkit-touch-callout: none; 
}
```
四、iphone及ipad下输入框默认内阴影
```
Element{
       -webkit-appearance: none; 
}
```


五、ios和android下触摸元素时出现半透明灰色遮罩
```
Element {
       -webkit-tap-highlight-color:rgba(255,255,255,0) 
}
```
设置alpha值为0就能够去除半透明灰色遮罩，备注：transparent的属性值在android下无效。




六、active兼容处理
```
<body ontouchstart="">
```

七、动画定义3D启用硬件加速
```
Element {
       -webkit-transform:translate3d(0, 0, 0) 
       transform: translate3d(0, 0, 0); 
}
```
注意：3D变形会消耗更多的内存与功耗


八、Retina屏的1px边框
```
Element{
       border-width: thin; 
}
```

九、旋转屏幕时，字体大小调整的问题
```
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
       -webkit-text-size-adjust:100%; 
}
```

十、transition闪屏

/设置内嵌的元素在 3D 空间如何呈现：保留3D /
```
-webkit-transform-style: preserve-3d;

```
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
```
-webkit-backface-visibility:hidden;
```

十一、圆角bug

某些Android手机圆角失效
```
background-clip: padding-box;
```