使用不同的HTML代碼的桌面和移動版

在我的website我試圖改變divs的外觀取決於屏幕大小。我已經有一個處理這個問題的css文件。當我使用移動版本時，這個div中的標題就是這樣的：所以，你可以看到標題不符合一行。使用不同的HTML代碼的桌面和移動版

的代碼是：

<div class="row"> 
       <div class="6u"> <section> <h3 class="image-radius img"><img src="images/datorama.jpg"/>DATA VISUALISATION ENGINEER</h3> 
        <p><b>Datorama</b></p> 
        <p>• Digital data analysis and automation</p> 
        <p>• User-Interface interaction improvement</p> 
        <p>• Visualisation of the insights </p></section> 
       </div>

所以，我加入了<br>改變了代碼的一行：

<div class="6u"> <section> <h3 class="image-radius img"><img src="images/datorama.jpg"/> <br>DATA VISUALISATION ENGINEER</h3>

因此，移動版本的罰款。但是，當我用這個，我的桌面版本是這樣的：

，但它曾經是這樣的：

我的問題是，我怎麼能有不同版本的HTML代碼取決於屏幕尺寸？我有CSS代碼，但它將很難設置它。現在我只需要添加一個<br>。有沒有辦法添加像（IF桌面版本，檢查CSS文件 - > HTML代碼版本1，否則 - > HTML代碼版本2）。

來源

2016-02-11 Apolo Radomer

是的，你*可以*做瀏覽器嗅探。但是，這是一種非常糟糕的使用方法。它遠遠優於使用CSS來正確安排（和隱藏）頁面上的div。你做什麼，如果你想走窮路線，在用戶代理中尋找「Android」或「Mobile」$ _SERVER ['HTTP_USER_AGENT'] – kainaw

你可以使用CSS媒體查詢，但請不要這樣做。只需提供像Stackoverflow這樣的移動版本和桌面版本即可。請勿根據屏幕大小動態更改顯示。當用戶想要查看完整站點並且在請求桌面站點時不尊重這一點時，這很煩人。 –

@ kainaw您能否解釋爲什麼您認爲使用用戶代理是一種不好的方法？這是如何從Android的Chrome可以具有「請求桌面網站」的功能。 –

你可以在這裏找到soemthing：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

// your mobile css version 
@media (min-width: 700px) { 
    // your desktop css version 
}

來源

2016-02-11 17:00:25

您還需要元標記以防止手機改變比例尺並聲稱其實際具有四倍像素。 – kainaw

是的，你說得對。完全忘記了 –

你可以使用類似這樣

function isMobile() { 
    $deviceList = array(
    '/iphone/i' => 'iPhone', 
    '/ipod/i' => 'iPod', 
    '/ipad/i' => 'iPad', 
    '/android/i' => 'Android' 
); 

    foreach($deviceList as $deviceKey => $deviceOS) { 
    if(preg_match($deviceKey, $_SERVER['HTTP_USER_AGENT'])) { 
     // echo your content for mobile devices 
    } 
    } 
}

這些都不是可以通過$_SERVER['HTTP_USER_AGENT']提供所有的移動設備，你可以檢查detectmobilebrowsers.com了完整列表

來源

2016-02-11 17:21:15

使用不同的HTML代碼的桌面和移動版

回答

相關問題