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;
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。