29

サイトのさまざまなバージョンに合わせて、サイトを最適化し、維持しやすいようにしたいと考えています。

私は自分のサイトのいくつかのバージョンを持っています:

  • iphone/ipod/android など...
  • iPad/タブレットなど...
  • 古い拍手電話のような他の小さなデバイス
  • デフォルト

MySQL 5、PHP 5、およびApache + Memcacheでubuntuサーバーを使用しています。

すべてのサイトが同じ基本機能を使用するようにサイトを実装する最良の方法は次のとおりです。

  • PHP
  • JS（共通用）
  • CSS（共通用）
  • 等...？

ありがとう

4

2 に答える 2

37

注: この解決策は、迅速な修正よりもパフォーマンスに関するものであり、最終的に完了しました

memcache を使用しているため、MySQL データベースからコンテンツを取得し、PHP で解析してキャッシュに保存し、表示すると仮定します。

各バージョンには異なるドメインがあります。iPhone/Android (およびその他のスマートフォン) はm.domain.comドメインを使用し、タブレット (iPad、galaxy など...) は を使用しt.domain.com、その他はすべて使用o.domain.comし、デフォルトではwww.domain.comorを使用しますdomain.com。

これらのサブドメインはすべて、同じフォルダー ( /var/www/- デフォルトのフォルダー) を指すことができます。トリックを行うのは、それをどのように呼び出すかです。

これを .htaccess または apache 構成に追加します。

SetEnvIf Host ^www\. page=www
SetEnvIf Host ^o\. page=others
SetEnvIf Host ^m\. page=mobile
SetEnvIf Host ^t\. page=tablets
rewriterule ^.*$ index.php?subdomain=%{ENV:page} [QSA,L]

したがって、PHP ファイルで を使用して$_GET['subdomain']、ページを生成するために何をする必要があるかを決定できます。このようにすると、メンテナンスが非常に簡単になります。入力ポイントが 1 つだけで、PHP でルールを設定して、表示する必要がある情報を取得できます (コンテンツは同じで、レイアウトのみが変更されます)。

私がお勧めすることの 1 つは、ファイルを最適化することです。あなたのサイトのモバイル版は、何らかの方法 (CSS、画像、JS) で軽くする必要があります。ネットワークが遅いモバイル デバイスから大きな CSS、JS、および画像をユーザーに読み込ませたくない場合。低速のネットワーク デバイスを可能な限り最適化する必要があります。つまり、176x220 のガラケー デバイスに 300x200 のロゴを表示したくないということです。1 つの方法は、ファイルが属するドメインに基づいてファイルに名前を付けることです。次に例を示します。

  • file.css (4k) VS file-m.css (0.4k)
  • logo.jpg (300px * 300px 15k) VSロゴ-m.jpg (100px * 40px 2k)

また、PHP コードには、JS、画像、および CSS ファイルを動的にロードするロジックを含めることができます。覚えておいてください、モバイル サイトの読み込みが速ければ速いほど、それは優れたものになります。保守性は重要ですが、ユーザーも重要です。モバイルサイトの速度が遅い場合、ユーザーはあなたのサイトにアクセスせず、別の場所に移動する傾向があります。誰もが携帯電話で 3G/4G ネットワークや WiFi を使用しているわけではありません。また、ファイルにアクセスする場合は、出力圧縮 ( deflateなど) を使用することをお勧めします。

これにより、特にモバイル デバイスの場合、読み込み時間が改善されます。同じファイル、たとえばニュースレターを送信するための Javascript ファイルを使用する場合、名前を付けて複製したりコピーしたりしたくはありません。PHP で追加のロジックを作成する代わりに、次のようなシンボリック リンクを作成できます。

ln -s /var/www/js/file.js /var/www/js/file-m.js

このソリューションでは、使用するデバイスの種類に応じて適切なサイトにリダイレクトする必要があります。折り畳み式携帯電話でサイトの iPhone バージョンを表示したくありません。これを実現するためにできるいくつかのトリックを次に示します。

// PHP version - also make sure the current domain is checked otherwise you will be in an infinite loop!
if(strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Android') !== FALSE)
{
  header('Location: http://m.domain.com/');
  exit();
}

または、デフォルト サイトの .htaccess/apache 構成内:

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "iphone|android" [NC]
RewriteCond %{HTTP_HOST} !^mobile.domain.com
RewriteRule ^(.*)$ http://m.domain.com/ [L,R=301] # or 302 if you want temporary
# etc...

http://detectmobilebrowsers.com/を参照して、モバイル デバイスで使用できるものを確認することをお勧めします。また、http: //validator.w3.org/mobile/をチェックして、すべてがモバイル デバイスで適切に表示されることを確認してください。 .

一般的な PHP ファイルに関しては、一元化された場所、つまり使用できる特定のパスを使用することをお勧めしますが、外部の世界は使用できません。このコードはすべて、すべてのサイトがこれらのファイルにアクセスできる共通のフォルダーに配置できます。例：

/web/lib/

このようにして、あなた以外の誰もあなたのファイルに直接アクセスできなくなります。PHP コードでは、次のようなことを行います (たとえば、ログイン スクリプト)。

<?php
 define('BASE_PATH', '/web/lib/');
 require(BASE_PATH . 'filex.php');
 // etc...
于 2011-12-13T00:06:26.623 に答える
6

いくつかの方法がありますが、維持するのが最も簡単なのは、モバイル ファーストの開発戦略を使用することです。これは、最小サイズの css を作成することを意味し (可能な場合はより小さい画像サイズを使用)、これがベースになり、css3 メディア クエリを使用して、ベース css を新しいスタイルで上書きします。

もちろん、IE にはいくつかの問題があるため、基本スタイルシートの後に条件ステートメント (lte ie8) を使用して (基本スタイルを上書きするように)、ie のデスクトップ css をロードします。

JS に関しては、JS を無効にしてサイトが正常に動作することを確認してください。ちょっとしたアドバイスとしては、javascript を完全に使わずにサイトを作成し、それが機能することを確認してから、既存の機能を強化するために追加することです。

主なコンテンツについては、同じままにしておいてください。PHP はデバイスごとに異なる必要はありません。面倒な作業はすべて CSS に任せてください。

これはあなたが持っているかもしれないもののサンプルです

//Your Base CSS (no background images here)
.content{
  width:240px;
  margin:0px auto;
}
.logo{
  background-image:url(../logosmall.png);
}
// Smartphones (portrait and landscape)
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
// Styles
}

// Smartphones (landscape)
@media only screen 
and (min-width : 321px) {
// Styles
}

// Smartphones (portrait)
@media only screen 
and (max-width : 320px) {
// Styles
}

// iPhone 4
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
// Styles
}

// iPads (portrait and landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
// Styles    
.content{
  width:768px;
}
.logo{
  background-image{url(../logomedium.png);
}

// iPads (landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
// Styles
}

// iPads (portrait)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
// Styles 
}

// Desktops and laptops
@media only screen 
and (min-width : 1024px) {
// Styles
.content{
  width:1024px;
}
.logo{
  background-image:url(../logolarge.png);
}
}

したがって、この例では、基本幅を 240 ピクセル (使用される最小の画面が 240 ピクセルであると仮定) に設定し、それを中央に配置してから、ウィンドウ サイズに応じてそれをより大きな値に上書きします。同じことが画像にも当てはまります。デフォルトでは、最小の画像を提供し、ウィンドウのサイズに応じて拡大します。

これは、モバイル ファーストのアプローチの一例です。多くの人が、レスポンシブ デザインを使用する場合のベスト プラクティスと考えています。これにより、スマートフォンがロードする必要がある背景画像の量が減るためです。

レスポンシブ デザインの例については、http://mediaqueri.es/ をご覧ください。

ここで提供した情報は表面的なものにすぎません。モバイル ファースト レスポンシブ デザインを検索すると、このテーマに関する多くの情報が得られます。

于 2011-12-12T14:24:04.987 に答える