Currently my website is setup where the full image that is in it is loaded then automatically sized to fit the screen. This is done by setting image width to 100% in CSS. While it does work nicely, It doesn't seem to follow standards because I don't specify width and height in the image tag itself.
目前我的网站已设置,其中加载了其中的完整图像,然后自动调整大小以适应屏幕。这是通过在CSS中将图像宽度设置为100%来完成的。虽然它确实很好用,但似乎没有遵循标准,因为我没有在图像标签本身中指定宽度和高度。
My idea now is to create multiple versions of the same webpage, where the only difference is the size of the image. Each image would have its own filename (like image1small.jpg, image1medium.jpg etc).
我现在的想法是创建同一网页的多个版本,唯一的区别是图像的大小。每个图像都有自己的文件名(如image1small.jpg,image1medium.jpg等)。
The problem is most people want to see the bigger picture right away but this doesn't go well with people with small screens since they have to scroll horizontally to see the whole thing.
问题是大多数人想要立即看到更大的图片,但这对于小屏幕的人来说并不顺利,因为他们必须水平滚动才能看到整个事情。
I was thinking putting javascript at the top that redirects users who don't meet screen criteria to the page with the better sized image. Something like this:
我正在考虑将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>
The thing is a page redirect will occur for people who do not meet the screen resolution requirements for the page. I'm not sure if this can qualify as a sneaky redirect to google.
对于不符合页面屏幕分辨率要求的人来说,这是一个页面重定向。我不确定这是否可以作为谷歌偷偷摸摸的重定向。
Is this a good practice to use the code like I showed above to redirect users with incompatible screen size to the correct page? or should I take a different approach to display the correct sized image to the user?
这是一个很好的做法,使用我上面显示的代码将屏幕尺寸不兼容的用户重定向到正确的页面?或者我应该采取不同的方法向用户显示正确尺寸的图像?
And regardless of the answer anyone gives, I feel I need to specify the width and height attribute for the image tag and I want to stick to the HTML 4.01 strict standard so that the page will work for everyone.
而且不管任何人给出的答案,我觉得我需要指定图像标签的宽度和高度属性,我想坚持HTML 4.01严格标准,以便该页面适用于每个人。
1 个解决方案
#1
0
The first draft of the HTML 5 standard was designed to work for everyone - it basically documented "what browsers actually do", rather than what browsers were supposed to do.
HTML 5标准的初稿旨在为每个人工作 - 它基本上记录了“浏览器实际上做了什么”,而不是浏览器应该做什么。
The rationale behind specifying the width and height attributes is that it reserves the space on the page even before the image loads, preventing the need to re-flow the content when the image loads.
指定宽度和高度属性背后的基本原理是,即使在图像加载之前,它也会在页面上保留空间,从而无需在图像加载时重新流动内容。
Choosing to specify the attributes, but then redirecting the page, will cause a worse re-render than using the % width without the attributes. So I think your concern is unfounded as your medicine is worse than the illness.
选择指定属性,然后重定向页面,将导致比使用没有属性的%宽度更糟糕的重新渲染。因此,我认为您的担忧是没有根据的,因为您的药物比疾病更糟糕。
The desire to server different image sizes is one of the use cases for responsive images, so you can take a look at that as an option rather than reloading the page. There are several fallbacks that give you wide-ranging browser support.
服务器不同图像大小的需求是响应式图像的用例之一,因此您可以将其作为一个选项而不是重新加载页面。有几个回退可以为您提供广泛的浏览器支持。
#1
0
The first draft of the HTML 5 standard was designed to work for everyone - it basically documented "what browsers actually do", rather than what browsers were supposed to do.
HTML 5标准的初稿旨在为每个人工作 - 它基本上记录了“浏览器实际上做了什么”,而不是浏览器应该做什么。
The rationale behind specifying the width and height attributes is that it reserves the space on the page even before the image loads, preventing the need to re-flow the content when the image loads.
指定宽度和高度属性背后的基本原理是,即使在图像加载之前,它也会在页面上保留空间,从而无需在图像加载时重新流动内容。
Choosing to specify the attributes, but then redirecting the page, will cause a worse re-render than using the % width without the attributes. So I think your concern is unfounded as your medicine is worse than the illness.
选择指定属性,然后重定向页面,将导致比使用没有属性的%宽度更糟糕的重新渲染。因此,我认为您的担忧是没有根据的,因为您的药物比疾病更糟糕。
The desire to server different image sizes is one of the use cases for responsive images, so you can take a look at that as an option rather than reloading the page. There are several fallbacks that give you wide-ranging browser support.
服务器不同图像大小的需求是响应式图像的用例之一,因此您可以将其作为一个选项而不是重新加载页面。有几个回退可以为您提供广泛的浏览器支持。