Android是否會在提交按鈕周圍添加額外的活動區域？

Android似乎正在增加我正在處理的HTML表單上提交按鈕的可點擊區域。就好像提交按鈕右側大約有25個像素也是可點擊的。這是有問題的，因爲在我的設計中，提交按鈕的右側是一個<A>元素，綁定了事件處理程序。點擊<A>通常會提交表單而不是觸發事件處理程序。我在Browerstack進行大部分測試，有些則在真實硬件上進行測試。問題表現在屏幕寬度較低（例如320px）的（虛擬）設備中，似乎在Android 2.3和4. iPhone（4s，iOS6）和Blackberry（v7）中的相同頁面不會出現問題。Android是否會在提交按鈕周圍添加額外的活動區域？

Here's a CodePen example，和相同的代碼的single file version以方便查看移動

有其他人看到了這一點？它是一個功能嗎？一個錯誤 - 無論是在Android或我的代碼？

來源

2012-12-04 Simon Dell

在情況下，我並不清楚，這個額外的命中面積是不可見的。它不佔用空間，不會推開任何周圍的元素。擊中區域的行爲就像按鈕具有'position：relative; padding-right：30px; z-index：100;'應用，但沒有實際的定位適用於任何有關的元素。 –

你有沒有試過對它應用reset.css？這似乎是一個android webkit的問題。

此外，嘗試使用40px區域的點擊按鈕。

來源

2012-12-04 15:45:49 SMillerNL

我同意40px的觸摸區域會更好。在我進入該項目之前，我必須得到第三方製作的客戶同意的設計不適用於這些建議，因此這裏沒有太多的範圍。我將會推動一些改變。 –

我選擇這個作爲答案，因爲這是合理的建議，我想在這個問題上「封閉」。出於上述原因，我無法實施。 –

我建議使用meyerweb.com提供的reset.css樣式表。它刪除（幾乎）瀏覽器將應用的所有樣式，但是您可能會發現您需要重新安裝大量的CSS，並在<h1>標記中添加大量內容。

CSS Tools: Reset CSS

來源

2012-12-04 15:47:24

這是一個有用的建議，並且該文件的衍生物已經在項目中。 –

繼續稍微深入一點，我想我最好檢查一下您鏈接的重置內容以及它可能與我使用的文件不同。 [Mayer的重置]（http://meyerweb.com/eric/tools/css/reset/）沒有指定任何可以控制輸入控件周圍的空格。它甚至不包括字符串「輸入」。我擁有的文件版本更加明確，可以控制'-webkit-appearance'，'box-sizing'以及邊距和填充。除了一些Android特有的關於可觸摸區域提交按鈕的規則之外，我無法看到會造成這種情況。 –

Android是否會在提交按鈕周圍添加額外的活動區域？

回答

相關問題