【问题标题】：HTML,Making site mobile-friendly,auto-redirect not working for all phonesHTML，使网站适合移动设备，自动重定向不适用于所有手机
【发布时间】：2015-04-21 18:26:49
【问题描述】：

上下文：我有一个 HTML4.01 过渡的旧网站，并进行了以下更改，以满足 GoogleBot 的新规则，即拥有视口/移动友好页面：

为移动可视页面版本创建了子域“m”。
添加到 .htaccess 文件： # 检查移动设备普遍接受的 mime 类型 RewriteCond....
在主桌面主页上添加了一些元标记如：

如果（屏幕宽度

在子域/m页面上，放入

@media screen and (min-width:240px) and (max-width:480px), 屏幕和 (min-device-width:240px) 和 (max-device-width:480px) { /* 样式 / } / 移动风格 */ @media 手持 { ....

问题：

虽然 googlebot 现在告诉我我的网站“适合移动设备”，但当我检查各种手机时我的台式电脑上的模拟器他们不显示移动页面。在检查 Android 时，自动重定向会转到移动页面。在 iPhone 上不会。

我错过了什么？

[我不能放链接，因为这是我第一次使用 stackoverflow，所以没有信誉评级，网站使用 m。和 www 。横田公司

提前谢谢你。

回答，2015 年 5 月 3 日：

根据收到的建议，我已经解决了这个问题。以下是采取的步骤：

添加到主 www 域的 .htaccess 文件中：

重写引擎开启 # 检查移动设备普遍接受的 mime 类型 RewriteCond %{HTTP_ACCEPT} "text/vnd.wap.wml|application/vnd.wap.xhtml+xml" [NC] 重写条件 %{REQUEST_URI} ^/$ RewriteRule ^ http://m.example.com%{REQUEST_URI} [R,L]
通过将所有内容以 100% 的比例放入表格中，使所有 html 页面响应网页
缩小了徽标和图像的大小。
在所有根 www html 文件中添加了以下代码：

如果 (screen.width
```
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    ....
    </HEAD>
```
1. 在移动子域html页面（m.exampleDOTcom）里面添加：

screen.css 和 mobile.css 是空文件

 <link rel="stylesheet" href="ht....m.exampleDOTcom/screen.css" type="text/css" media="Screen" />
    <link rel="stylesheet" href="h....m.exampleDOTcom/mobile.css" type="text/css" media="handheld" />

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

    <style type="text/css">

@media screen and (min-width:240px) and (max-width:480px), 
   screen and (min-device-width:240px) and (max-device-width:480px)
{
     /* Styles */
}
/* mobile styles */
@media handheld {

    html, body {
        font: 12px/15px sans-serif;
        background: #fff;
        padding: 3px;
        color: #000;
        margin: 0;
        }
    #sidebar, #footer {
        display: none;
        }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
        }
    #content img { 
        max-width: 250px;
        }
    .center {
        width: 100% !important;
        text-align: center;
        }
    a:link, a:visited {
        text-decoration: underline;
        color: #0000CC;
        }
    a:hover, a:active {
        text-decoration: underline;
        color: #660066;
        }

}
/* iPhone-specific styles */
@media only screen and (max-device-width: 480px) { 

    html {
        -webkit-text-size-adjust: none;
        }

}


</style>

============

我认为我至少应该分享对我有用的方法，以防其他人搜索相同的问题。很高兴发现这个网站，因为我在编码方面是一个自学者，而且这个网站具有完整性并且非常有帮助。我很欣赏它的节制程度。谢谢。

【问题讨论】：

不是一个真正的答案。但是你不应该尝试响应式网页设计而不是重定向它吗？仅仅因为谷歌“喜欢”并不意味着你的客户会......
@Danny van Holten：感谢您查看此内容。这是很好的建议，这就是我要做的。在与各种 JS、meta、重定向、htaccess 等斗争了几天之后，我突然意识到我可能在 5 年前建立了这个页面，与我最近添加到网站的东西不同，它根本不是'移动响应'。所以，我正在接受你的建议，谢谢你的时间。
将所有内容放在一个 100% 宽度的表格中不与让您的网站具有响应性。阅读一些响应式网站的设计指南。 This 是一个好的开始。重做所有 CSS 可能需要做更多的工作，但最终你会更满意并且你已经为未来做好了准备——无论引入什么设备。
@BramVanroy：好建议。我意识到我现在拥有的是一个不完美的解决方案，我需要对此进行一些研究。感谢您的评论，tnx。

标签： html .htaccess

【解决方案1】：

我忘记添加 IPHONE 代码：

<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) ||   
(navigator.userAgent.match(/iPod/i))) {
location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>

别忘了用您的手机页面更改http://url-to-send-them/iphone.html！

【讨论】：

【解决方案2】：

兄弟，我们可以超级简单！

写下这段代码：

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>

我在我的网站上使用了它。我们工作！ 100% 惠特 000webhost.com 和其他人！

不要忘记将 mobile.html 更改为您的移动页面名称

【讨论】：