1

ウェブサイトのモバイル版を作成しています。たいしたことはなく、ほんの数ページです。2 つの場所で更新することなく、両方の形式でコンテンツを共有できるようにしたいと考えています。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 Web ブラウザ (エミュレータ)

すべてをこの順序で配置する必要があります。そうしないと機能しません。また、standard.css に mobile.css と同じ css 属性がすべて含まれていることも確認する必要があります。たとえば、モバイル#myitem { border:1px solid black; }で標準ビューに #myitem の境界線を表示したくない場合は、standard.css#myitem { border:none; }内に配置する必要があります。そうしないと、Mac Firefox が mobile.css ファイルから値を取得し、境界線を表示します。アイテム。

4

2 に答える 2

2

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/resolution-specific-stylesheets/

于 2010-10-01T01:15:59.217 に答える
0

ページのコンテンツ全体を本当に共有し、配置とスタイルを変更したい場合は、CSS が最適です。ページの「モバイル向けに最適化された」バージョンを提供したい場合、明らかに CSS ではそれについて多くのことはできません。その場合、多くのオプションがあります。たとえば、実際の肉の「コンテンツ」をデータベースまたは静的ファイルに保存し、PHP または同等の方法で関連データを含むページを生成するか、ソース XML ファイルで同じことを行って生成します。 XSLT を介してページ。

于 2010-10-01T01:36:35.153 に答える