当前位置：首页 → 问答吧 → 网页如何自适应浏览器客户端

网页如何自适应浏览器客户端

时间：2011-09-02

来源：互联网

我们可以通过window.screen.width和window.screen.height获取屏幕的分辨率，即浏览器客户端的宽高
然后我想实现的是根据屏幕的分辨率对浏览的网页进行缩放，达到刚好填充屏幕的效果
谢谢各位大大了

作者: ncuboy045wsq 发布时间: 2011-09-02

其实想告诉楼主，这种实现很不现实。
假设入你所说，我1024*768的分辨率和1440*900的分辨率，你网页的div宽高度怎么给，img宽高度怎么给，如果按百分比给，那么div的内容可能会错位，img也会被拉伸和缩放，不能显示原有的效果。如果是按像素给的话，那么布局肯定错位！
很不建议将设计好的网页进行拉伸或缩放！

作者: chchawen 发布时间: 2011-09-02

引用 1 楼 chchawen 的回复:

其实想告诉楼主，这种实现很不现实。
假设入你所说，我1024*768的分辨率和1440*900的分辨率，你网页的div宽高度怎么给，img宽高度怎么给，如果按百分比给，那么div的内容可能会错位，img也会被拉伸和缩放，不能显示原有的效果。如果是按像素给的话，那么布局肯定错位！
很不建议将设计好的网页进行拉伸或缩放！

那你觉得根据给定的分辨率进行设计怎么样呢

作者: ncuboy045wsq 发布时间: 2011-09-02

虽然不是做美工的，但也学过，网页的整体设计是肯定不能按分辨率给的，如果要适用于各个浏览器和各个分辨率。按像素给，现在网站基本是按1024的分辨率来做的，所以宽度基本定义在1024以下，网站内容置于网页中间，这样即使换成大分辨率，只要网站内容在中间那么就不会出现布局错位的问题。你可以借鉴一下csdn，taobao，360buy，youku等网站，看看不同分辨率下他们的网页内容位置！

作者: chchawen 发布时间: 2011-09-02

不能用window.screen.width，屏幕的尺寸能代表浏览器可见窗口的尺寸吗？
其实宽度在css中可以用100%，这个很简单。
高度的问题100%兼容性不好，可以用jquery，比如var h = $(window).height();

作者: zghbsyqyb 发布时间: 2011-09-02

引用 4 楼 zghbsyqyb 的回复:

不能用window.screen.width，屏幕的尺寸能代表浏览器可见窗口的尺寸吗？
其实宽度在css中可以用100%，这个很简单。
高度的问题100%兼容性不好，可以用jquery，比如var h = $(window).height();

很不建议对宽高度用100%

作者: chchawen 发布时间: 2011-09-02