2015-02-05 55 views
1

對此有最佳做法嗎?在新視圖中重置視口縮放?

我們的應用程序是一個應用程序窗體,所以有一系列用戶填寫表單並單擊按鈕轉換到下一個窗體的視圖。

發生了什麼事情(至少在我的Android上使用Chrome瀏覽器,訪問網絡應用程序)是當我填寫表單時Chrome瀏覽器放大 - 這很有幫助 - 但當我離開時它仍保持在縮放狀態到下一個視圖。我希望它重置爲顯示整個頁面。

我能想到的兩個選項:

  1. 設置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />防止結垢的。 第一個,我還沒有測試過,以確認它會阻止瀏覽器有助於縮放。 第二個,可訪問性對我們來說非常重要,所以我對這個解決方案感到很不舒服。

  2. 以某種方式重置縮放(使用JavaScript?)關於視圖載入?這對我來說似乎很難受。

建議?

我不認爲它是關於我怎麼這樣做真實影響該視圖轉變什麼,但以防萬一:窗體上的按鈕是一樣的東西:

<button ng-click="save(sections, nextSection)" type="submit"> 
Next Step 
</button> 

save在控制器的方法是:

$scope.save = function(sections, nextSection) { 
    applicationForm.set(sections); 
    $location.path(nextSection); 
} 

其中nextSection會像"https://stackoverflow.com/questions/2"的字符串。

回答

1

將最大比例設置爲1是可訪問性違例,因爲根據WCAG 2成功標準1.4.8,所有文本都必須縮放到至少200%。

如果您將輸入字段的字體大小設置爲大於19pt,那麼在進行編輯時它將不再縮放。

+0

爲什麼19分?價值從哪裏來? – denishaskin 2015-02-09 18:38:27

+0

它基於經驗。還有其他職位聲稱16px,你可能想嘗試,但在所有平臺上測試它http://stackoverflow.com/questions/7073396/disable-zoom-on-input-focus-in-android-webpage http ://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone – unobf 2015-02-10 17:20:16

0

此問題受到Chrome用戶的許多詢問。

由於十一月,26 2014,最小尺寸爲避免自動縮放特徵是16分: 看到minReadableCaretHeight在源代碼: https://src.chromium.org/viewvc/blink/trunk/Source/web/WebViewImpl.cpp?pathrev=186037

而且讀線4528到4531:

的文檔被認爲適於到小屏幕UA如果其中之一成立:

  1. 作者指定的視口有一個約束寬度這等於初始視口寬度。

  2. 作者已禁用視口縮放。

所以,你應該只定義:

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

爲了使確定您的應用程序,並禁用惱人的功能。用戶將仍然可以根據需要進行縮放。