背景:在写html页面的时候,要对不同平台展示不同的页面(或者内容)
方式一:
<script type="text/javascript">
$(document).ready(function () {
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
// document.writeln("您的浏览设备为:");
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
// document.writeln("phone");
// $("#platform").text("您的浏览设备为: phone");
$("#platform").show();
} else {
// document.writeln("pc");
// $("#platform").text(" 您的浏览设备为:pc");
$("#platform").hide();
}
}
// browserRedirect();
});
</script>
方式二:判断当前html的展示页面大小,css media query
@media screen and (min-width: 0px) and (max-width: 600px) {
#platform { display: block; } /* show it on small screens */
}
@media screen and (min-width: 600px) {
#platform { display: none; } /* hide it elsewhere */
}
通过media来判断当前页面展示的大小,然后隐藏platform div