Обмен контентом между веб-сайтом и мобильным сайтом - PullRequest
1 голос
/ 01 октября 2010

Я создаю мобильную версию своего сайта.Ничего особенного, всего несколько страниц.Я хотел бы иметь возможность обмениваться контентом в обеих формах, без необходимости обновлять его в двух местах.Это самый простой способ сделать это с помощью 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.файл и показать границу на элементе.

Ответы [ 2 ]

2 голосов
/ 01 октября 2010

CSS - ваш лучший выбор.

С помощью медиазапросов вы можете решить, какую таблицу стилей использовать для отображения вашего контента.

 <link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
 <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Эта ссылка может вам помочь: http://css -tricks.com / разрешение конкретных-таблиц стилей /

0 голосов
/ 01 октября 2010

Если вы действительно хотите поделиться всем содержимым страницы и просто расположить вещи по-разному, CSS - ваш лучший выбор.Если вы хотите использовать «оптимизированную для мобильных устройств» версию страницы, очевидно, что CSS не позволит вам с этим справиться.В этом случае существует множество опций, таких как хранение реального мясного «контента» в базе данных или статических файлах и создание страницы с соответствующими данными через PHP или эквивалентный файл, или сделать то же самое с исходным XML-файлом и сгенерироватьстраница через XSLT.

...