根據屏幕分辨率顯示內容

我有一個包含一些內容的網站。根據用戶屏幕分辨率我想顯示不同的內容，以便移動設備將有一些其他內容，但網站的其餘部分將是相同的。我做了一些研究，似乎唯一可能的方式是使用javascript。我大部分時間都是用PHP編寫代碼，所以我非常喜歡javascript，所以如果有人能夠給我一個簡單的腳本，那將會很好。根據屏幕分辨率顯示內容

我需要的是像這樣的javascript函數：

if (screen resolution < X x X) { 
show some content... 
} else { 
show some other content ... 
}

如果JavaScript被關閉，它應該只是顯示一些其他內容.. :)我可以安裝jQuery的，如果有幫助。謝謝

這將是很好的HTML代碼的例子。

來源

2011-09-01 2by

一個相同的問題被問大約5小時前。自從我失敗後，我確定有其他人可以找到它。 – Layke

你不應該檢測用戶是否在使用javascript的移動設備上。我推薦你使用PHP。你可以使用[$ _SERVER 'HTTP_USER_AGENT']，然後簡單地解析出字符串來查看它是什麼類型的用戶代理。我現在實際上正在實施這個相同的概念。

你也可以使用這個類Mobile Detect

include("Mobile_Detect.php"); 
$detect = new Mobile_Detect(); 

if ($detect->isMobile()) { 
    // any mobile platform 
}

來源

2011-09-01 00:08:04

聽起來像是一個好主意，我擔心的是我需要用移動用戶代理做一個該死的長列表，或者有一種智能的檢測方式這個？ – 2by

所以我發現這個方便的PHP腳本http：// detectmobilebrowsers。mobi/ – 2by

您可以使用preg匹配並查找關鍵詞，如iphone，ipod和andriod。或者使用這個類。 http://code.google.com/p/php-mobile-detect/ –

你應該嘗試CSS媒體查詢，而不是

來源

2011-09-01 00:02:52 szajmon

你有什麼例子嗎？ – 2by

在不從PHP知道，但在.net中，你可以有點檢測，他們是移動訪客，那麼你可以將其重定向到網站的移動部分。

然後，你真正需要做的就是編寫小網站重新使用你現有的網絡控制等。再次，不確定你是否有這個概念在PHP中，但我想你會。

來源

2011-09-01 00:04:04 griegs

我也不知道，但這可能是一個解決方案。現在我想保持相同的網站/設計，但只是一些視頻應該不同於移動設備 – 2by

啊好的。如果該網站很小，那麼是的這個解決方案可能會過度殺傷 – griegs

您可以使用CSS媒體查詢來定位不同的屏幕分辨率。例如：

@media only screen and (max-device-width: 1024px) and (orientation: landscape) { 
    /* iPad in landscape orientation css */ 
} 
@media only screen and (max-device-width: 480px{ 
    /* iPhone css */ 
}

更多信息： http://mislav.uniqpath.com/2010/04/targeted-css/ http://webdesignerwall.com/tutorials/css3-media-queries

來源

2011-09-01 00:05:34 marissajmc

謝謝，這可能會有用一段時間。現在我需要更改一些html內容，我不認爲我可以用CSS做這個 – 2by

退房CSS的規則。它們允許您爲CSS規則的「名稱空間」指定最大寬度和最小寬度，在其中您可以對較小的屏幕擁有不同的規則。但使用這些時要小心，因爲IE不喜歡支持好東西。

@media screen, projection and (max-device-width: 800px) {} 
@media screen and (max-device-width: 300px) {}

一個項目我工作，我們實際上重定向到頁面的移動版本，如果用戶代理包含特定關鍵字（簽出JS的HTTP頭），並完全使用不同的樣式表。

來源

2011-09-01 00:07:04 Art

根據屏幕分辨率顯示內容

回答

相關問題