如何使我的簡單網站測驗適合平板電腦和手機？

Question

如何使我的簡單網站測驗適合平板電腦和手機？ 在橫向模式下，測驗的大小為1024x672。 大小是靜態的。 如果沒有針對所有設備的防彈解決方案，我希望使用專門針對iPhone和iPad的解決方案。

這是測驗： http : //wp.servitus.ch

要求：

• 自動縮放取決於設備當前的屏幕尺寸
• 用戶應該無法手動縮放
• 可以強制使用風景模式嗎？

我已經嘗試過：

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

這在iPad上工作正常，但在iPhone上太大了。

有任何想法嗎 ？

Answer 1

此meta視口無法幫助您，因為initial-scale為1。這就是為什么它對於iPhone太大的原因：您告訴設備此頁面的初始比例必須是其尺寸的100％（此處為1024px寬度） ，則必須刪除此參數或將其設置為較低（0.5或0.625，因為640/1024 = 0.625）。

嘗試一下（這適用於iPhone和iPad）：

<meta name="viewport" content="width=device-width">

或者（在iPad上應該很小）：

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

編輯：

這應該工作：

<meta name="viewport" content="width=1024">

我在沒有經過良好編碼的移動網站上使用了該技巧，它將視口強制設置為1024，並使其適合設備屏幕。 您可以向meta添加任何參數。

Answer 2

目前，我正在使用下面的代碼。 目前可以滿足我的要求（iPad，iPhone，計算機之間的區別）。 如果有人對所有可能的設備都擁有防彈解決方案，那么如果您能與我分享它，我將非常高興:-)謝謝！

$(document).ready(function() {

    var isMobile = (/iPhone|iPod|Android|BlackBerry/).test(navigator.userAgent);
    var isTablet = (/iPad/).test(navigator.userAgent);

    if(isMobile) {
        $('<meta name="viewport" content="initial-scale=0.45, maximum-scale=0.45, width=device-width, user-scalable=yes">').appendTo('head');
    } else if(isTablet) {
        $('<meta name="viewport" content="initial-scale=0.95, maximum-scale=0.95, width=device-width, user-scalable=no">').appendTo('head');
    } else {
        $('<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, user-scalable=no">').appendTo('head');
    }
});