-
На iOS устройствах числовые значения подчёркиваются синим. Эта проблема возникает из-за того, что iOS устройства по умолчанию считают все числа похожие на телефонные номера - телефонными номерами. Решается добавлением
<meta name="format-detection" content="telephone=no" />
Тоже самое касается адреса:<meta name="format-detection" content="address=no" />
-
Пользователь может уменьшать и увеличивать приложение. Решается добавляением тега
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
-
Ссылки нажимаются с задержкой (примерно 300ms). Решается подпиской на событие touchstart и принудительной инициализацией события click после него. Если проблема всё равно возникает - ничего не поделать, надо облегчать dom. Как вариант - можно использовать библиотеку, посоветанную @adubovsky ниже в комментариях: https://gist.github.com/SerafimArts/de9900f99
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>LABjs Demo</title> | |
<script src="/js/queue.LAB.js"></script> | |
<script> | |
// adding `false` in the queue will signifiy an empty .wait() in the $LAB chain | |
$LAB.queue("http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js", false); | |
$LAB.queue("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js", false); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function () { | |
var setupRegularResize, setupIframeResize, e; | |
function bind(a, b) { | |
return function () { | |
return a.apply(b, arguments); | |
}; | |
} | |
setupRegularResize = (function () { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// Create media queries | |
// - | |
// Live example: http://goo.gl/M1pJ6c | |
// - | |
// Example: | |
// .selector { | |
// ... | |
// .Mq(sm; { | |
// width: 100px; |
This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.
- Set
-moz-appearance
tonone
. This will "reset" the styling of the element; - Set
text-indent
to0.01px
. This will "push" the text a tiny bit[1] to the right;
An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.
Everything is broken up by tag, but within each the selectors aren't particularly ordered.
I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A
A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:
-webkit-appearance:none;