jquery - 如果用户通过移动设备导航，如何显示 HTML 模板？

Question

我有两种类型的 HTML 文件。

第一种是针对计算机用户的。第二种是针对移动用户的。它是用 jQuery Mobile 编码的。

第一种是上传到服务器的。如果用户通过移动设备（iphone、三星等）导航，我该如何编写代码来显示移动设备的 HTML？

谢谢。

Answer 1

使用 PHP，您可以使用Mobile Detect库。这很容易并且保持最新。也允许使用isTablet()和其他。

您可以执行以下操作：

include 'Mobile_Detect.php';
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
  includeMobilePage();  // Any mobile device.
} else {
  includeDesktopPage();
}

Answer 2

你可以根据宽度来做。像这样：

if($(window).width() < 480){
 window.location = "mobile.yoursite.com"
}

Answer 3

If your site content is the same for both mobile and regular users, and you just need different layout, I suggest looking into CSS media queries and building a responsive design site.

For example, in your CSS:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Any CSS directive you put within those brackets will only apply when the screen is at least 400px wide, but less than 700px wide.

This example and others can be found here: http://www.w3.org/TR/css3-mediaqueries/

Answer 4

通常我在 php 中使用此代码，并将所有 jquery mobile 放在一个名为 smartphone 的文件夹中

<?php 
$mobile_browser = '0';
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|ipad)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}

if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}    

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));

$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-');

if (in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
    $mobile_browser = 0;
}

if ($mobile_browser > 0) {
   header("Location: smartphone/");
}