Какие особенности верстки под моб. браузеры?
1.
Дмитрий (26.07.2013 / 15:43)
Кто работает с версткой под современные мобильные девайсы, поделитесь, какие особенности при верстке под них?
Например, знаю, что Android до 3 версии не понимает CSS значения "position:fixed". Так же он не понимает значений "overflow:scroll/auto".
Какие еще особенности есть и как с ними бороться? Перерыл дофига информации в гугле, везде перекопированы 3-4 статьи, не несущие особого значения.
Прошу писать только по сути. Отблагодарю плюсом и деньгами сайта.
2.
Дмитрий (26.07.2013 / 17:04)
Если кому-то интересно, как я борюсь с этими косяками, то вот так:
В <head> или в подключаемом JS файле определяется девайс пользователя:
<script>
var _ua = navigator.userAgent.toLowerCase();
var device = {
iphone: /iphone/i.test(_ua),
iphone4: /iphone.*OS 4/i.test(_ua),
iphone5: /iphone.*OS 5/i.test(_ua),
ipod: /ipod/i.test(_ua),
ipod4: /ipod.*OS 4/i.test(_ua),
ipad: /ipad/i.test(_ua),
nexus: /nexus/i.test(_ua),
nexus7: /nexus 7/i.test(_ua),
nexus10: /nexus 10/i.test(_ua),
android: /android/i.test(_ua),
android_version: parseFloat((_ua.match(/android (\d+(\.\d)*)/i) || [0,'0'])[1]),
bada: /bada/i.test(_ua),
mac: /mac/i.test(_ua),
mobile: /iphone|ipod|ipad|opera mini|opera mobi|iemobile/i.test(_ua)
};
</script>
а внизу страницы определяется девайс и при необходимости подключается CSS файл, в котором переопределяются некоторые значения для старой версии Android:
<script>
if (device.android && device.android_version < 3){
var newLks = document.createElement('LINK');
newLks.setAttribute('src', '/css/appstyle_light.css');
newLks.setAttribute('media', 'screen');
newLks.setAttribute('rel', 'stylesheet');
newLks.setAttribute('type', 'text/css');
document.getElementsByTagName('head')[0].appendChild(newLks);
}
</script>
URL:
https://visavi.net/topics/38564