为 Android 和 iOS 显示不同的 HTML

Posted 2023-03-17

【中文标题】为 Android 和 iOS 显示不同的 HTML

【英文标题】：Display different HTML for Android and iOS

【发布时间】：2019-01-24 23:22:10

【问题描述】：

我需要根据访问门户的客户端是使用 android 手机还是 ios 手机来显示不同的 html。我尝试使用基于 userAgent 的检测：Redirect users to iTunes app store or google play store?

然后我尝试使用： $( document ).ready(function() 和 if 语句来检查代理是 iOS 还是 Android，并基于其中一个，显示 iOS 的 div 或 Android 的 div。任何好的方法这样做？

安卓专用说明

<div id="android-quicklink">
<p>ANDROID SPECIFIC INSTRUCTIONS</p>
<p id="content-container"><a href="#" id="android-link" target="_new"><span class=“googleplay-icon"> </span></a></p>
</div>

<script>
    $( document ).ready(function() 
        if (getMobileOperatingSystem() == "Android") 
            $('#android-link').attr("href", "https://play.google.com/xxxxxxx");
            $(‘.googleplay-icon').toggleClass('googleplay-icon')
            $('#android-quicklink').toggle();
        
    );
 </script>

【参考方案1】：

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

//-->
</script>
"mobile.html" would be replaced with the location of wherever your mobile version resides. This technique could be adapted to load an alternate stylesheet as well.

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

-->
</script>

【讨论】：

嗨，谢谢你的例子。但是，这将加载不同的页面。我打算做的是： 特定于 Android 的内容，文本和图形 特定于 iOS 的内容，文本和图形