怎么让网页自动适应各个手机浏览器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么让网页自动适应各个手机浏览器相关的知识,希望对你有一定的参考价值。

1 . 第一种:

第一个想法是需要使用一个 css 背景图,如果这张图够大,就能填充整个屏幕。当浏览器窗口大小没有图片大时,它将自动隐藏多余的部分。
<head> .... <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() $("img.source-image").hide(); var $source = $("img.source-image").attr("src"); $(\'#page-body\').css( \'backgroundImage\': \'url(\' + $source +\')\', \'backgroundRepeat\': \'no-repeat\', \'backgroundPosition\': \'top center\' ); ); </script> </head> <body id="page-body"> <img class="source-image" src="images/image.jpg" /> </body>

上面的这些代码能够自动隐藏超出浏览器窗口部分的图片(image.jpg)多余部分,不会使浏览器产生滚动条。

2 . 第二种:

第一次试验的效果并没有达到要求,并不是真的使得背景图片适应窗口大小,应该使用设置“宽度”和“高度”属性来控制图片的大小,如果我们能够得到浏览器窗口显示像素,就可以利用这个数字来控制图片大小,同时保持比例。

使用 jquery 和 dimensions plugin 可以获得这些参数。
<script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.dimensions.js"></script> <script type="text/javascript"> $(document).ready(function() var $winwidth = $(window).width(); $("img.source-image").attr( width: $winwidth ); $(window).bind("resize", function() var $winwidth = $(window).width(); $("img.source-image").attr( width: $winwidth ); ); ); </script>

为了让这张图片更像一个背景图像,我们设置:
img.source-image position: absolute;top: 0;left: 0;

因为背景图片加上了定位代码,那要加在背景图片上任何东西都需要定位,如果您的背景图像是竖条状的(特别的高),而你的浏览窗口特别的宽,很容易造成背景图片高度超过您的浏览器窗口的高度,为了防止这种情况,需要设定对超出的部分进行隐藏:
body overflow: hidden;

3 . 第三次方法(最好的):

Stu Nicholls version给出了最好的方法(看了下网易的首页也是这样做的),这处理方式不需要任何的 JavaScript 就能完美的达到目的。
#img.source-image width: 100%;position: absolute;top: 0;left: 0;

在 css 里直接设定背景图片宽度的百分比,这是这个方法的效果。这个方法是最好的,而且不需要任何的 JavaScript 。
参考技术A 自己编程。你可以试试用多种浏览器(包括台式机、平板、手机、MAC系统等)来访问http://www.baidu.com/看看效果、区别。
静态网页是不可能支持的。
还要你的服务器端也要能支持动态功能。本回答被提问者和网友采纳

以上是关于怎么让网页自动适应各个手机浏览器的主要内容,如果未能解决你的问题,请参考以下文章

怎么让手机浏览器自动翻译网页

DIV CSS 如何让网页中的某DIV自动适应屏幕高度自己变如下图

怎样让苹果手机浏览器放大后文字部分自适应屏幕

怎样让手机网页自动刷新?

手机怎么自动刷新网页

如何实现手机自动适应网页