0

目前我的网站已设置为加载其中的完整图像，然后自动调整大小以适合屏幕。这是通过在 CSS 中将图像宽度设置为 100% 来完成的。虽然它工作得很好，但它似乎没有遵循标准，因为我没有在图像标签本身中指定宽度和高度。

我现在的想法是创建同一个网页的多个版本，唯一的区别是图像的大小。每个图像都有自己的文件名（如 image1small.jpg、image1medium.jpg 等）。

问题是大多数人希望立即看到更大的画面，但这对于小屏幕的人来说并不顺利，因为他们必须水平滚动才能看到整个画面。

我正在考虑将 javascript 放在顶部，将不符合屏幕标准的用户重定向到具有更好尺寸图像的页面。像这样的东西：

<html>
<head>
<script>
    if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>

事情是页面重定向将发生在不满足页面屏幕分辨率要求的人身上。我不确定这是否可以称为偷偷摸摸地重定向到谷歌。

使用上面显示的代码将屏幕尺寸不兼容的用户重定向到正确的页面，这是一个好习惯吗？还是我应该采取不同的方法向用户显示正确大小的图像？

不管任何人给出的答案如何，我都觉得我需要为图像标签指定宽度和高度属性，并且我想坚持 HTML 4.01 严格的标准，以便该页面适用于所有人。

4

1 回答 1

0

HTML 5 标准的初稿是为所有人设计的——它基本上记录了“浏览器实际做什么”，而不是浏览器应该做什么。

指定宽度和高度属性的基本原理是，它甚至在图像加载之前就保留了页面上的空间，从而防止在图像加载时重新排列内容的需要。

选择指定属性，然后重定向页面，将导致比使用没有属性的 % 宽度更糟糕的重新渲染。所以我认为你的担心是没有根据的，因为你的药比疾病更糟。

响应式图像的用例之一是服务器的不同图像大小的愿望，因此您可以将其视为一个选项，而不是重新加载页面。有几个后备方案可以为您提供广泛的浏览器支持。

于 2015-10-23T22:57:06.870 回答