一、功过Jquery进行浏览器适配
匹配出哪些UA类型,从而作出对于的行为
<script type="text/javascript">
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;
if(isMobile) {
$(".breadcrumb").after($("#widget-populars"));
$("#widget-populars").show();
// $("#widget-populars2").hide();
$("#widget-comments").hide();
$("#widget-linkbacks").hide();
$(".J_Poster").hide();
// $("#widget-populars-mobile").hide();
}else {
$("#widget-populars").show();
// $("#widget-populars-mobile").hide();
}
$("#images_size").each(function(){
if($(this).width() > $(this).parent().width()) {
$(this).width("100%");
}
});
</script>
二、网页浏览器中缩放适配
如果浏览器触发发生缩放的行为,将触发图片元素进行等比例缩放,如下例所示:
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function(){
windows_w = $(window).width()
if(windows_w<1000){
var w_how = (windows_w/1000);
post_main_w = $(".poster-main").width();
post_list_w = $(".poster-list").width();
$(".poster-main").width((w_how*post_main_w));
$(".poster-list").width((w_how*post_list_w));
$(".poster-main img").width((500*w_how));
// console.log((500*w_how));
}else{
$(".poster-main").width(700);
$(".post_list").width(700);
$(".poster-main img").width((576));
}
// $("#imgId").height($(window).height());
// $("#imgId").width($(window).width());
});
});
</script>