“响应式设计”兼容 IE8 的例子

[liuzhiyong]

没错， IE8 ！在中国还有超过一成的人用 IE8 ：
http://tongji.baidu.com/data/browser

只能用 JS 去实现了：
代码： https://github.com/httpliuzhiyongme/homepagejs （所有“ IE8_”开始的函数是专门针对 IE8 滴）
效果： http://liuzhiyong.me/ （可以调整窗口大小，看内容自动适应浏览器窗口——是的，支持 IE8 ）

得到的一些经验：
1. 窗口宽度“ window.innerWidth ”不管用，要读取 clientWidth
2. IE8 没有 devicePixelRatio ，可以认为等于 1 （用户的屏幕应该不是高清的）
3. CSS 很多效果不管用，例如这个页面用到的“圆角 H2 ”。通过动态加载 PIE.js 然后实现“圆角”
4. 动态加载 JS 文件时， onload 在 IE8 没用，得用 onreadystatechange 事件
5. IE8 解析网页真的很慢， CSS 没有起效时，显示得一团糟。解决办法就是在 CSS 起效前隐藏文档（起效后显示）
6. 同样的 font-size ， IE8 显示的比 Chrome 小（至少 Win7 上是这样，我没有 WinXP ），要特别关照
7. 这个不是 IE8 的： Firefox 和 Chrome 的缺省 line-height 不一样，对这个有要求的话，一定要设置 line-height

[Kilerd]

除非公司的需求。要不然，对不起，那些人不是我的目标用户。😷😷😷

[murmur]

response.js 就可以让 ie8 支持媒体查询啊。。

[onionnews]

确定这剩下的一成 ie8 用户是真人吗，机器刷流量的可能占一部分吧。

[ss098]

在你的例子里把窗口放小，就会出现横向滚动条。

[liuzhiyong]

@Kilerd 哈哈，我是没办法，个人网站打算给老家的长辈看，他们对电脑啥都不懂。

[liuzhiyong]

@murmur 是的，我这是“土法炼钢” ：-）

[liuzhiyong]

@onionnews 我就认识几个用 IE8 的长辈，人家就是习惯了。

[liuzhiyong]

@ss098 不会吧，我测试了 Chrome/Firefox/IE8/三星手机 /小米手机 /OPPO 手机 /iPad 。请问你用的是什么浏览器呀？

[ss098]

你有几张图片指定了 width ，超出了父容器的宽度。

可以这样解决：

img {
max-width: 100%;
}

[liuzhiyong]

@ss098 啊，这个是故意搞的——当浏览器窗口的宽度大于 600 ，图片“全尺寸”：
（ https://github.com/httpliuzhiyongme/homepagejs/blob/master/homepage.js 第 45 行做判断）
“全尺寸”图片导致出现横向滚动条。

背后有个想法：屏幕实在太窄（小于等于 600 像素），那么所有图片适应屏幕宽度；如果屏幕足够宽（大于 600 像素），还是全尺寸显示（会出现“横向滚动条”，同时图片会“完美展示”，这是个权衡利弊的问题）

非常感谢你提供的“ max-width ”建议！

[jrotty]

学校机房默认，我们这很多人都不知道 ie 和谷歌什么的什么区别，到机房打开电脑，看到个 ie 浏览器就打开，然后网页糊的不行，就抱怨网站不行，网速不行等等，后来推荐他们用了 360 浏览器，但是学校机房跟网吧一样开机后安装的软件全部还原

[liuzhiyong]

@jrotty 哈哈，完全理解。学校里面的系统一般都有点“古董”，因为能够满足基本需求，懒得升级。

[Arnie97]

老家长辈的电脑上默认浏览器不应该是搜狗或者 360 吗 XD