2014-06-19 4 views
0

Dans mon projet J'utilise un css réactif pour que la mise en page s'adapte à l'appareil. Mais j'ai besoin de changer le rendu d'une liste non ordonnée (utilisée par un carrousel). Fondamentalement, pour le bureau et l'iPad je rends effectivement la liste comme ceci:Rendu html basé sur le type de périphérique

<div id="carousel"> 
<div id="slide_A"> 
    <ul class="carousel"> 
     <li><div class="item">AAA</div></li> 
     <li><div class="item">BBB</div></li> 
     <li><div class="item">CCC</div></li> 
    </ul> 
</div> 
<div id="slide_B"> 
    <ul class="carousel"> 
     <li><div class="item">DDD</div></li> 
     <li><div class="item">EEE</div></li> 
     <li><div class="item">FFF</div></li> 
    </ul> 
</div> 

Sinon pour l'appareil comme l'iPhone le code devrait être ceci:

<div id="carousel"> 
<div id="slide_A"> 
    <ul class="carousel"> 
     <li><div class="item">AAA</div></li> 
    </ul> 
</div> 
<div id="slide_B"> 
    <ul class="carousel"> 
     <li><div class="item">BBB</div></li> 
    </ul> 
</div> 
<div id="slide_C"> 
    <ul class="carousel"> 
     <li><div class="item">CCC</div></li> 
    </ul> 
</div> 
.... 

est-il une chance de détecter côté serveur (C#) l'agent utilisateur actuel ou le type d'appareil? grâce

+0

Pourquoi exactement? Les chances sont là une autre façon de faire ce que vous essayez de faire ... –

+0

Parce que sur iPhone, j'ai besoin d'ajouter une diapositive pour chaque div donc le défilement montre une image par page (si je voudrais montrer 6 images, ils sembleraient trop peu) – Ras

Répondre

1

Vous pouvez utiliser UserAgent dans l'en-tête de demande. Cela contient les informations sur les navigateurs, les périphériques, etc. Vous devez trouver le périphérique requis dans cette chaîne d'agent utilisateur pour vérifier si la requête provient du périphérique spécifié ou non.

Par exemple, utilisez la fonction suivante pour vérifier si la demande provient de tout appareil mobile

public static bool IsMobileDevice() 
     { 
      string u = HttpContext.Current.Request.ServerVariables["HTTP_USER_AGENT"]; 
      Regex b = new Regex(@"android.+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino", RegexOptions.IgnoreCase | RegexOptions.Multiline); 
      Regex v = new Regex(@"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|e\\-|e\\/|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(di|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|xda(\\-|2|g)|yas\\-|your|zeto|zte\\-", RegexOptions.IgnoreCase | RegexOptions.Multiline); 
      if ((b.IsMatch(u) || v.IsMatch(u.Substring(0, 4)))) 
      { 
       return true; 
      } 
      return false; 
     } 
1

Vous pouvez l'utiliser pour voir si elle est un iPad:

bool isIpad = Request.UserAgent.ToLower().Contains("ipad"); 
Questions connexes