3

Im testing out the vw unit (relative to viewport width). My question is, is there an easy method to convert the vw value with pixels? It doesnt have to be responsive. I was thinking of Jquery. The prefixfree plugin and vminpoly dont seem to work for me (testing on locally)

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
The Javascript Noob
  • 129
  • 1
  • 2
  • 8
  • 2
    ... why? What crazy devices are you using that they aren't desktops, requiring responsive design, *AND* use IE8? – Mike 'Pomax' Kamermans Dec 07 '13 at 18:10
  • @Mike'Pomax'Kamermans hey mike, I dont really understand what you mean. Basically I created a site that is responsive for 240px width to all screen resolution, including the highest retina. For width I used percentage, but for some of the heights I used vw. Problem is the new relative unit isnt ie8 compatible. Im not sure if I should create an extra static style for ie8 or use a js solution – The Javascript Noob Dec 07 '13 at 18:21
  • 2
    IE8 is a desktop browser. No one using IE8 will look at your site at 240px. So the question you must always ask is: do I need to shim browser X for this feature? Will this even occur in browser X? For IE8 and a narrow site, that answer is "no, nothing that runs IE8 will be seeing your site in narrow layout" – Mike 'Pomax' Kamermans Dec 07 '13 at 18:31
  • @Mike'Pomax'Kamermans I get your point. The thing is, I want the site to resize with the browser window even if the user has ie8. – The Javascript Noob Dec 07 '13 at 19:18
  • Yes, but whoever uses IE8 will never enter their mind to re-size their window and if they do they get what they get like they always have, who gives a poop. People generally minimize on desktop and flip orientation on mobile/tablet no regular user re-sizes pages wildly. – Christina Dec 07 '13 at 19:26
  • what you want and what's worth your time are two different things, in this case. Before investing time and effort into something, determine whether it makes sense. IE8 users will never start resizing their browser while on a website (it's a desktop browser), and they will most certainly not try to view the web at narrow sizes, because in IE8, 99.9% of the web won't cooperate, so the idea that it might even work specifically on your site will not even enter into their internet experience. Don't solve problems that only exist to your mind. Spend that time solving real problems instead. – Mike 'Pomax' Kamermans Dec 07 '13 at 21:19
  • @Mike'Pomax'Kamermans Again your answer was very helpful. You are very right about the fact that im trying to solve something not worth the time. Im thinking of either dropping ie8 entirely or serving an extra stylesheet with the same code but using px values instead. Just not hundred percent sure what kind of screen resolution they use. – The Javascript Noob Dec 08 '13 at 14:13
  • responsive design -> us em or percentages for everything except your base font size, and use px values for your media queries. If it helps, google has dropped support for IE8 on their gmail and webapps a while back, and microsoft doesn't want to use it, or windows XP, anymore. XP gets hardline discontinued in April, so you might as well stop targeting IE8 – Mike 'Pomax' Kamermans Dec 08 '13 at 16:42
  • @Mike'Pomax'Kamermans Thanks, I find your answer very useful. Oh can I trust the statistics there? https://theie8countdown.com/‎ If microsoft and google drop support then probably I should too, ya. By the way, I just hosted another question Mike about responsive heights. Maybe you want to have a look at it too. – The Javascript Noob Dec 08 '13 at 18:52
  • To argue why the OP requested IE8 compatible options simply doesn't answer the question. vminpoly is still a good option if implemented correctly. I explain in my answer below. – daleyjem Apr 07 '15 at 00:58
  • Some clients still have IE8 as requirement to be supported. In such a case it is good to know how to get things done and using something like this is good practise if you don't want to use a separate stylesheet. In fact for fun I test out dummy projects in IE8 and lower and see how far I can get and once you get the hang of it with a few IE conditional comments in the head you can get your site working down to IE8 and at times further just fine. Yes I do like to resize and see how the design responds overall, regardless of OS or platform. – lowtechsun Feb 20 '16 at 15:35

1 Answers1

1

I tested the following vminpoly demo link on IE8, and it worked: http://saabi.github.io/vminpoly/demo2.html

It's important to note that using many CSS-related polyfills require that you are running them from a real web server (even if locally), as the basis off which they work is to "AJAX load" the CSS file's raw text and parse it manually. If IE8 doesn't support viewport units, the JS polyfill will never know its value by simply parsing the DOM with jQuery or whatever.

You say you're testing locally. Is that from a local server instance (http://localhost) or directly from the file system (file:///index.html)? The latter is very likely to fail due to cross domain security policy restrictions (XHR).

You can read more about this for the RespondJS polyfill.

daleyjem
  • 2,335
  • 1
  • 23
  • 34