如何为手机提供移动版网站

时间:2014-02-09 16:54:19

标签: jquery html jquery-mobile mobile

我已经搜索过,但在论坛上找不到我要找的内容。我有一个标准的HTML(不是wordpress)网站。它在桌面和ipad上显示效果很好。我使用jquery mobile构建了一个非常缩小的移动版本,只有基本信息 问题是,如何仅将手机文件提供给手机?我可以用什么代码告诉手机使用jquery移动文件或网址而不是普通的桌面文件?我还在网站的jquery移动版本上添加了“查看完整网站”按钮。如果选择“查看完整网站”并且选择后不再返回移动版本,如何让手机显示完整网站?我在许多网站上看到了这一点,但一直未能弄清楚。谢谢你的帮助!迈克

这是我在mikeschaler.com的主要网站

// will allow to use sessions
session_start();

if(!isset($_SESSION['mobile_detect'])) {
    require_once 'Mobile_Detect.php';
    $detect = new Mobile_Detect;

    if ( $detect->isMobile() ) {
        header('Location: mobile.mikeschaler.com');    
    }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<link rel="shortcut icon" href="/MESfavicon.ico" type="image/x-icon" />
<link rel="icon" href="/MESfavicon.ico" type="image/x-icon">

<title>Mike Schaler Media Services</title>

<style type="text/css"></style>

<link href="mikeSiteRedesign.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-19130075-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>

这是我尝试在mobile.mikeschaler.com上为移动用户提供的移动网站:

<!doctype html>
<html>
<head>
    <title>Precison Garage Door</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="themes/Precision-Garage-Door.min.css" />
        <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="jquery.mobile.structure-1.4.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="jquery.mobile-1.4.0.min.js"></script>

session_start();
$_SESSION['mobile_detect'] = 0;
header('Location: mikeschaler.com/index.html');

    </head>

这是你在找什么?谢谢!

好的,我从mobile.mikeschaler.com网站上删除了代码。 我创建了一个带有“//将允许使用会话会话启动...”代码的php文件 在我在代码顶部插入的mikeschaler.com网站上我是否完全正确?麦克

完整的网站代码现在看起来像这样:

<?php 
mobileRedirect.php 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

2 个答案:

答案 0 :(得分:1)

您可以使用某些PHP脚本来检测移动版本,如:http://mobiledetect.net/

然后,对于“完整网站”按钮,将用户发送到:fullwebsite.php。该页面将设置一个会话,表明它必须不检测移动版本。

// will allow to use sessions
session_start();

if(!isset($_SESSION['mobile_detect'])) {
    require_once 'Mobile_Detect.php';
    $detect = new Mobile_Detect;

    if ( $detect->isMobile() ) {
        header('Location: your_url.html');
    }
}

设置会话的页面:

session_start();
$_SESSION['mobile_detect'] = 0;
header('Location: full_website.html');

答案 1 :(得分:0)

<?php
// will allow to use sessions
session_start();

if(!isset($_SESSION['mobile_detect'])) {
    require_once 'Mobile_Detect.php';
    $detect = new Mobile_Detect;

    if ( $detect->isMobile() ) {
        header('Location: mobile.mikeschaler.com');    
    }
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

这是你必须代替你的代码。

然后是mobile.php中的代码:

<?php
session_start();
$_SESSION['mobile_detect'] = 0;
header('Location: /'); // "/" to redirect to the root path
?>