Я создаю мобильную версию своего сайта.Ничего особенного, всего несколько страниц.Я хотел бы иметь возможность обмениваться контентом в обеих формах, без необходимости обновлять его в двух местах.Это самый простой способ сделать это с помощью CSS?Или я могу создать какой-то XML или текстовый файл и прочитать его на обоих сайтах?
Вот что я в итоге использовал:
<!--[if IE]>
<link rel='stylesheet' href='ie.css' type='text/css' />
<![endif]-->
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='mobile.css' type='text/css' />
<link rel='stylesheet' media='screen and (min-device-width: 481px)' href='standard.css' type='text/css' />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
Это работает для:
Windows IE 8, Windows Firefox 3.6.7, Mac Safari 5.0.2, Mac Firefox 3.0.6, iPhone 4 Safari, веб-браузер Android (эмулятор)
Вы должны поставить всев этом порядке иначе это не будет работать.Вы также должны убедиться, что в файле standard.css есть те же атрибуты css, что и в mobile.css.Например, если в мобильном телефоне вы говорите #myitem { border:1px solid black; }
, но вам не нужна граница для #myitem в стандартном представлении, вы должны поместить #myitem { border:none; }
в standard.css, в противном случае Mac Firefox получит значение из mobile.css.файл и показать границу на элементе.