IOS對safari私有的屬性很多，雖然很多不為人知但是卻很實用。掌握好這些屬性對web app和混合app的開發(fā)會很有幫助。

1.format-detection[telephone=no]?是否自動把電話號碼轉(zhuǎn)為鏈接

1	<meta name="format-detection" content="telephone=no">

IOS針對HTML文檔內(nèi)的純文字，會自動轉(zhuǎn)換為電話號碼鏈接，當(dāng)點擊時，會默認(rèn)和系統(tǒng)的撥號相關(guān)聯(lián)，但是開發(fā)者有時候并不想這樣。

這時只要在head加上上面這段meta，就不會了。

2. viewport ?控制應(yīng)用屏幕屬性

1	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

viewport是一個針對移動web的meta標(biāo)簽，它的主要屬性如下：

width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時的 CSS 的像素）。

height：和 width 相對應(yīng)，指定高度。

initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時候縮放比例。

maximum-scale：允許用戶縮放到的最大比例。

minimum-scale：允許用戶縮放到的最小比例。

user-scalable：用戶是否可以手動縮放

為什么我們要設(shè)置width和height?因為移動終端的分辨率比常用的顯示器要小，假如我們把一般的網(wǎng)站在safari打開，會發(fā)現(xiàn)整體布局和文字都縮小的顯示在手機屏幕上，只有我們把瀏覽器寬度設(shè)置成和我們手機分辨率寬度一樣，才是1:1的對應(yīng)顯示。所以一般我們開發(fā)web app，width=device-width 把寬度設(shè)置成和設(shè)備寬度一樣。

至于?initial-scale、maximum-scale、minimum-scale ?就是在出現(xiàn)了頁面內(nèi)容和設(shè)備分辨率不是1:1 對應(yīng)的時候用的，我們都知道用戶可以使用雙指操作將safari頁面放大或者縮小，user-scalable可以控制用戶是否可以這么做。假如我們設(shè)置了?width=device-width，一般我們不再需要給用戶縮放。特別針對混合型的web app，我們體驗盡量向原生APP靠攏，不允許縮放是大部分應(yīng)用的做法。

這里有個經(jīng)驗分享，之前我在使用jquery mobile 1.0.2 版本的時候，發(fā)現(xiàn)jqm初始化的時候會用javascript把user-scalable設(shè)置成true，所以那時候即使我加了meta標(biāo)簽，也沒有作用，后來才發(fā)現(xiàn)是jqm搞的鬼。后來1.1.0版本沒有這個問題，假如你設(shè)置了這個meta標(biāo)簽的屬性發(fā)現(xiàn)不生效，可以檢查一下是不是一些第3方框架對這些屬性做了設(shè)置。

3.webkitTouchCallout ?禁止原生彈出菜單

在IOS瀏覽器里面，假如用戶長按a標(biāo)簽，都會出現(xiàn)默認(rèn)的彈出菜單事件，例如：

CSS3 的webkitTouchCallout ?屬性可以控制這個原生行為是否被執(zhí)行，只要加上這段CSS

1	body {? -webkit-touch-callout: none; }

javascript也是可以設(shè)置的：

1	document.documentElement.style.webkitTouchCallout = 'none';

上面都是設(shè)置在body全局上，當(dāng)然如果你只想某些地方不執(zhí)行這種行為，可以把CSS屬性定義在對應(yīng)的地方。

4.webkitUserSelect ? 禁止用戶選中

如果用戶長按web網(wǎng)頁的文本內(nèi)容，都會出現(xiàn)選中的行為，提供復(fù)制文字等功能。

和上面的屬性一樣，設(shè)置可以禁止這種默認(rèn)行為。

CSS的方法

1	body { -webkit-user-select: none; }

javascript方法

1	document.documentElement.style.webkitUserSelect? = 'none'; ?

轉(zhuǎn)載于:https://www.cnblogs.com/human/p/3472598.html

總結(jié)

以上是生活随笔為你收集整理的IOS web app一些实用的属性设置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。