隱藏用於手機的內容

我一直在試圖隱藏在我的網站的移動版本中看起來很奇怪的東西。我無法刪除它，因爲它使用桌面版本的網站資源，所以如果我刪除它會從桌面版本中消失。隱藏用於手機的內容

我嘗試使用CSS它通過使用此代碼隱藏，

@media only screen and (max-device-width: 480px) { 
    .HideMobile{ 
     display:none; 
    } 
}

所以，我的問題是。有沒有更好的方法來做到這一點？我試圖從移動平臺上隱藏PHP代碼。

來源

2014-08-31 Martin

你是說你的媒體查詢代碼沒有隱藏元素？ – j08691 2014-08-31 18:24:08

正確。我應該把內容分開嗎？ – Martin 2014-08-31 18:25:46

-1

PHP是服務器端，無關與要求您的資料

來源

2014-08-31 18:22:12

試試這個PHP庫http://mobiledetect.net

這將幫助您檢測使用，你可以有條件地添加你的代碼不同的設備的客戶端。

來源

2014-08-31 18:31:18 WisdmLabs

我在構建的所有網站中都使用它。 – Lee 2014-09-01 14:51:25

我通常使用this，不管顯示器大小如何，假設您的手機版本包含平板電腦，iPad等等。

用法：

那樣簡單，包括這個片段：

(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');

只是把它的文件準備好。

來源

2014-08-31 18:36:23 ProllyGeek

當你想隱藏的HTML輸出，使一類在你的CSS

.hide_mobile { 
    display:block; 
}

，並在你的CSS說，這在一個特殊的寬度此類應設置爲顯示：無;

@media screen and (max-width: 480px) { 
.hide_mobile { 
    display:none; 
} 
}

來源

2014-08-31 18:36:43 Marvin

我試圖隱藏PHP輸出，而不是HTML。 – Martin 2014-08-31 18:41:41

你不能輸出PHP。當你想要一個動態的解決方案（一個腳本，實現當瀏覽器變小），你應該使用JavaScript，例如jQuery窗口寬度函數等 – Marvin 2014-08-31 18:43:50

我會建議採用RESS方法。它本質上是響應式網頁設計與服務器組件的組合。這裏的一般邏輯如下：在服務器上標識請求設備，並根據您設置的某些條件提供一定的資源集。對於服務器檢測軟件，我建議使用51Degrees的解決方案。

因此，假設您的網站上有一個div塊，您想隱藏所有移動設備。首先，您需要從sourceforge下載PHP檢測器。然後，您的頁面將有以下代碼：

page.php文件

<?php 
require_once 'path/to/core/51Degrees.php'; 
require_once 'path/to/core/51Degrees_usage.php'; 
//Where path/to/core is path to 'core' directory of detector 
?> 
<html> 
<head> 
<?php 
$css_file = "desktop.css"; 

if ($_51d['IsMobile'] == TRUE) 
{ 
$css_file = "mobile.css"; 
} 
?> 
<link rel="stylesheet" type="text/css" href="<?=$css_file; ?>"> 
</head> 
<body> 
<div class="desktop_only"> 
<p>Lorem......</p> 
</div> 
</body>

mobile.css

.desktop_only 
{ 
display:none; 
}

現在，移動設備將不會看到該分區。這種方法的真正好處在於能夠根據設備類型提供一組不同的資源，並且不必爲每種可能的屏幕尺寸都放置數十個媒體查詢。您可能想調整您的網站的移動設計，以避免浪費寶貴的智能手機和平板電腦屏幕空間，或重新設計菜單，以避免下拉部分等...

這種方法的另一個偉大的事情是：如果您需要進行額外的檢查（即，e：爲Apple設備提供不同的主題，或者檢查設備是否支持HTML畫布等），他們將很容易整合到您當前的實施中。

希望這有助於。

來源

2014-09-01 14:44:21 Mike

隱藏用於手機的內容

回答

相關問題