別バージョンの異なるウェブサイト

StackOverflow https://stackoverflow.com/questions/8400499

質問

を確認して欲しいんの最適化を使っていた時と変わらないと思いサイトや維持のための異なるバージョンのサイトです。

私は数バージョンのサイト:

  • iphone/ipod touch/androidなど---。
  • ipad/タブレットなど...
  • その他の小型機器る様子がまとめられている貴重な機会に是非電話
  • デフォルト

使っていubuntuサーバにMySQL5、PHP5Apache+Memcache.

池尾：そういうふうに考えてい道を私のサイトですべての基本機能:

  • PHP
  • JS（共通）
  • CSS(共通)
  • など---?

感謝

役に立ちましたか？

解決

注意：このソリューションが以上の性能は修正といっ

いてご利用memcacheお客様のコンテンツからMySQLデータベースを構文解析ではPHPに保存してくださいキャッシュを表示します。

各バージョンが異なる。iPhone/Androidのスマートフォン）をご利用 m.domain.com ドメイン、タブレット(iPad、銀河など）の利用 t.domain.com, 全てのその他の利用 o.domain.com デフォルトの利用 www.domain.com または domain.com.

これらすべてのサブドメインすることができ、同じフォルダ/var/www/ デフォルト）してご利用いただけます。うだというのはどのようお話です。

に追加します。.htaccessファイルはapacheのconfig:

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取得する情報を必要な表示（コンテンツには、レイアウトします。

一つのことをお勧めしますの最適化ファイルです。モバイル版のサイトligherの他の方CSS、画像、JS).によってお使いのユーザーへの負荷の大きなCSS JS画像からのモバイルデバイスは遅いのです。また最適化が可能な限り遅くなネットワーク装置です。その他の言葉ではなく、表示したい300x200のロゴ176x220ッ電話装置です。片道される名前のファイルに基づくドメインです。例えば:

  • ファイルです。css(4k) ウェブサイト上のコンテンツ ファイル-mとなります。css(0.4k)
  • logo.jpg (300px*300px15k) ウェブサイト上のコンテンツ マーク-m.jpg (100px40px2k)

やPHPコードできるロジックを動的に負荷JS,画像やCSSファイルです。として覚え、より速く読み込んだ携帯サイトは、より良いです。Maintabilityが重要なのがユーザーされます。遅いモバイルサイト、その傾向はこちらをクリックサイトとくらいしか採用できる場所はない。なみは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 configの下でのデフォルトのサイト:

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...

他のヒント

いくつかの異なる方法がありますが、維持するのが最も簡単なのは、モバイルの最初の開発戦略を使用することです。これは、CSSを最小サイズ（可能な限り小さい画像サイズを使用して）で書き込むことを意味し、これがベースになり、CSS3メディアクエリを使用して、ベースCSSを新しいスタイルでオーバーライドします。

もちろん、IEにはいくつかの問題がありますので、ベーススタイルシート（ベーススタイルを上書きするように）の後に条件付きステートメント（LTE IE8）を使用して、IEのデスクトップCSSをロードします。

JSについては、JS Disabledでサイトが正常に動作できることを確認してください。ちょっとしたアドバイスは、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);
}
}

したがって、この例では、240pxのベース幅を設定します（使用される最小の画面が240pxであると仮定して）、それを中心にすると、ウィンドウサイズに応じてより大きな値にそれを上書きします。同じことが画像にも当てはまります。デフォルトでは、最小の画像を提供し、ウィンドウサイズに応じてスケールアップします。

これはモバイルファーストアプローチの例です。多くの人は、電話が読み込まれなければならない背景画像の量を減らすため、レスポンシブデザインを使用する際にベストプラクティスであると考えています。

を見てみましょう http://mediaqueri.es/ レスポンシブデザインの例をいくつか見てください

そして、詳細を検索してください。ここで提供したものは、表面を傷つけます。モバイルの最初のレスポンシブデザインを検索すると、このテーマに関する多くの情報が得られます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top