sách gpt4 ai đã đi

testing - 响应式布局针对哪些设备/浏览器

In lại 作者:行者123 更新时间:2023-11-28 20:02:33 33 4
mua khóa gpt4 Nike

我正在为客户(项目已被接受,但现在是解释不同功能的问题)写一份详细的估算,以开发一个响应式布局的网站。

这不是我第一次进行此类开发,但这是一个关键客户,必须铺平道路。

布局将从 300px 宽度调整到 1200+px,因此几乎适用于“任何”设备和浏览器,但我对此的 promise 有点失落。对于桌面网站,很容易在您的契约(Contract)中写明支持的浏览器将是“IE7+、最新版本的 FF、Safari、Chrome、Opera”,但是对于响应式网站,您怎么写?

我知道我有很多设备可以用来执行测试(比如 PC、Mac、iPad、iPhone、2 或 3 台 Android 设备),但我该对我的客户说什么呢?我不能写“网站可以在任何设备上运行”,也不能给出它可以运行的设备/浏览器组合的详尽列表。而且我不想陷入“我叔叔在他的 2.2 Android 旧手机上看到该网站但它不工作” 的困境。

有很多桌面工具可以模拟各种视口(viewport)并对其进行测试,但它们很难像“真实的东西”那样工作;还是我们开发人员可以“按契约(Contract)”引用一种标准?您如何管理它以及您对客户的 promise 是什么?

1 Câu trả lời

采用渐进式增强方法进行开发。不可能让一个网站像素完美,并且在每个浏览器上都一样。

采用分层方法(金牌/银牌/铜牌)。旧的和未经测试的浏览器将获得内容(IE7,旧的黑莓,旧的任何东西)。新浏览器的内容和布局都不错(IE8/9、Firefox < 4)。现代浏览器会得到一个典型的漂亮的现代网站。

可以通过适当的思考来设置它。从下往上构建它。青铜到白银再到黄金。从最小的设置开始(只有颜色、字体、文本。没有 div,没有布局,nada)。这是你的青铜器。接下来获得银级设置。包括布局。此布局适用于较小的屏幕。最后我们将拥有黄金。这将包括用于更大屏幕的媒体查询和用于提高可用性和精细度的 JS。

通过将布局包装在@media only screen{} 查询中,可以将布局分为青铜级和银级。旧的浏览器不理解它。内容仍会出现在这些浏览器上。要在 Silver 和 Gold 之间进行拆分,只需放入一个最小宽度的媒体查询即可。

此外,确保客户理解“网站可在任何设备上运行”的定义。仅仅因为 Opera Mini 不支持 line-height 并不意味着该网站无法正常工作。这是 Brad Frost 就该主题撰写的一篇文章:支持与优化:http://bradfrostweb.com/blog/mobile/support-vs-optimization/

希望能帮到你

关于testing - 响应式布局针对哪些设备/浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14477289/

33 4 0
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com