Какие особенности верстки под моб. браузеры?

⚠️ Bymas - Форум разработчиков
Милый пушистый сайт !!!!
Печать RSS
170
Дмитрий 26.07.2013 / 15:43 Автор
Голубые штаны
0
Кто работает с версткой под современные мобильные девайсы, поделитесь, какие особенности при верстке под них?

Например, знаю, что Android до 3 версии не понимает CSS значения "position:fixed". Так же он не понимает значений "overflow:scroll/auto".

Какие еще особенности есть и как с ними бороться? Перерыл дофига информации в гугле, везде перекопированы 3-4 статьи, не несущие особого значения.

Прошу писать только по сути. Отблагодарю плюсом и деньгами сайта.
Дмитрий 26.07.2013 / 17:04 Автор
Голубые штаны
0
Если кому-то интересно, как я борюсь с этими косяками, то вот так:

В <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>
Изменил: Дмитрий (26.07.2013 / 17:15)
Стикеры / Теги / Правила / Топ тем / Топ постов / Поиск