防止iPhone從web應用程序

上`select`放大我有這樣的代碼：防止iPhone從web應用程序

<select> 
    <option value="c">Klassen</option> 
    <option value="t">Docenten</option> 
    <option value="r">Lokalen</option> 
    <option value="s">Leerlingen</option> 
</select>

在iPhone上全屏Web的應用程序運行。

當從這個列表中選擇一些東西時，iPhone會放大select -element。選擇某些東西后不會縮小。

我該如何預防？或縮小回來？

來源

2011-06-26 Stijn Martens

這可能是因爲瀏覽器試圖放大的區域，因爲字體大小小於門檻，這通常發生在iphone。

提供元標籤屬性「user-scalable = no」將限制用戶在其他地方縮放。由於問題與只選擇元素，請嘗試在您的CSS中使用以下內容，本hack最初用於jquery mobile。

HTML：

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

CSS：

select{ 
font-size: 50px; 
}

源：unzoom after selecting in iphone

來源

2012-11-20 07:31:44

+11

如果文本可見（與我的情況相同），在啓用縮放前，16px似乎是最小值。 –

爲了更清楚起見，這條線會阻止自動縮放：'$（''，{name：'viewport'，content：'user-scalable = no'}）。appendTo（'head'）;' – Abbas

+10

Since什麼時候隱藏在select元素中的文本？「不會帶來任何佈局問題」 – Bill

我不認爲你不能對孤立行爲做任何事情。

你可以嘗試的一件事是讓頁面不要放大。如果您的頁面是爲手機設計的，那麼這很好。

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

你可以嘗試的另一件事是使用JavaScript構造，而不是通用的「select」語句。創建一個隱藏的div來顯示你的菜單，在javascript中處理點擊。

祝你好運！

來源

2011-06-26 11:01:03

我已經在我的元標籤。這是奇怪的事情。 –

用戶可擴展= no是你需要什麼，就這樣居然有一個明確的回答這個問題

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

來源

2011-06-28 22:38:45 sciritai

實際上，加入width = device-width，initial-scale = 1.0，maximum-scale = 1.0就足夠了。我不相信你需要用戶可擴展的最大規模。 –

@DanSmart，至少在我的情況下（我不知道是什麼把它分開），最小/最大比例是不夠的 - 增加用戶可擴展=沒有做出改變。 – corolla

這感覺就像一個非常笨手笨腳的方法 - 我建議謹慎使用user-scalable = no。 [從Dev.Opera]（https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/），「也可以完全關閉縮放，但請牢記縮放是很多人使用的重要輔助功能，因此只有在確實需要的情況下才能進行縮放，例如某些類型的遊戲和應用程序。「 –

這似乎對我的情況下，解決這個問題的工作：

@media screen and (-webkit-min-device-pixel-ratio: 0) { 
select:focus, textarea:focus, input:focus { 
     font-size: 16px; 
    } 
}

小號uggested here通過Christina Arasmo Beymer

來源

2013-06-04 00:20:33 Triptoph

在我的情況下，IOS 7x老用戶可擴展是不夠的。上面的伎倆感謝你分享。 – landed

它的工作，非常感謝你！ –

試試這個：

function DisablePinchZoom() 
{ 
    $('meta[name=viewport]').attr("content", ""); 
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no"); 
} 

function myFunction() 
{ 
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes"); 
} 


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();"> 
</select>

DisablePinchZoom將平變化之前，所以變焦將在平變化被觸發時被禁止被解僱。在onchange功能上，最後可以恢復初始狀態。

測試在iPhone 5S

來源

2014-06-09 14:51:39

iPhone的小幅如果文本被設置爲小於16個像素將放大表單字段。我建議將移動窗體字段的文本設置爲16像素，然後在桌面上覆蓋大小。

說明禁用縮放的答案對於視力不佳的用戶無益，可能仍然希望放大縮小手機。

例子：

# Mobile first 
input, textarea, select { 
    font-size: 16px; 
} 

# Tablet upwards 
@media (min-width: 768px) { 
    font-size: 14px; 
}

來源

2015-10-01 10:03:10 martinedwards

這很好！但是，如果我的文本溢出了選擇框的全部寬度呢？在這種情況下我能做些什麼？ – gota

防止iPhone從web應用程序

回答

相關問題