使用Bootstrap爲設備類型做出響應式設計

我收到了一個網站，上面有一個激活碼和一個input文件可以用來手動插入它。在智能手機和平板電腦上，fileupload應該是不可能的。我試着像使用Bootstrap爲設備類型做出響應式設計

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 

     <title /> 

     <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <!-- Some content for the page --> 

     <div class="hidden-xs hidden-sm"> 
      <span>Upload file</span> 

      <input type="file" /> 
      <input type="button" value="Upload" /> 
     </div> 

     <div> 
      <span>Insert key</span> 

      <input type="text" /> 
     </div> 

     <!-- More content for the page --> 
    </body> 
</html>

這工作得很好的智能手機，平板電腦在肖像模式和在桌面上。在橫向模式的平板電腦上，可以看到上傳。該解決方案似乎是「中等」（meens Desktop），所以它顯示。

如果設備是智能手機，平板電腦或桌面併爲每個設備定義行爲，是否可以獲取信息？

在此先感謝。

來源

2014-11-21 mburm

爲什麼不使用'@ media'查詢並設置寬度，以便它不顯示屏幕尺寸是否大於所提供的寬度 – Izzy 2014-11-21 12:00:34

您可以嘗試使用Modernizr來檢查設備是否是觸摸設備。 – 2014-11-21 12:25:28

您是否使用Bootstrap提供的媒體查詢以外的媒體查詢？它不清楚你用CSS試過了什麼。 – Tim 2014-11-21 12:57:04

您必須爲此確定useragent，而這僅適用於CSS。您可以使用Javascript來添加特定的主體類，或者在服務器端添加。

例如，detectmobilebrowser.com上有很多腳本，您可以修改該腳本以區分智能手機和平板電腦。

來源

2014-11-21 12:08:45 mvuajua

使用Bootstrap爲設備類型做出響應式設計

回答

相關問題