如，Colorbox(version:1.3.19 + jQuery 1.7.2 )在iPhone瀏覽器中未能螢幕置中顯示。查了半天，發現是由於版面設定了viewport，而Colorbox中使用了$window.width()/$window.height()來擷取計算快顯視窗的位置所致。
為了適應行動裝置，一般我們會設定Viewport（可視區糾正）。即在<head>頭中添加如下設定：
[html]
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
width=device-width代表可視地區寬度為裝置寬度
initial-scale=1代表使用者開啟頁面時的放大層級為1，即預設1:1顯示
user-scalable=no為禁止使用者縮放
作以上設定以後，$window.width()擷取到的寬度在iPhone中即是device-width( 320px / 480px ）。也就是說，的情況實際上是在將頁面縮放到非320*480尺寸或者移動之後會出現，顯示會變得很扭曲。
我們可以在Colorbox的原始碼中找到如下這段：
[javascript] www.2cto.com
if (settings.right !== false) {
left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0);
} else if (settings.left !== false) {
left += setSize(settings.left, 'x');
} else {
left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2);
}
if (settings.bottom !== false) {
top += Math.max($window.height() - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0);
} else if (settings.top !== false) {
top += setSize(settings.top, 'y');
} else {
top += Math.round(Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2);
}
為了能在iPhone中獲得較好的顯示效果，我們可以將$window.width()/$window.height()改為window.innerWidth/window.innerHeight。Colorbox即可以在螢幕中置中顯示。
但是，請注意window.innderWidth/window.innerHeight在IE8及以下瀏覽器中是不被支援的，也就是說可能需要做個判斷，對於兩種情況使用不同的函數。
作者：jyee721
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
