1

When I went to test out my website in Safari after developing with Chrome, I ran into a problem: All the text and images are strikingly low-resolution: Site here

Gross. Text is pixelated, images are low-resolution

I'm on a retina display, but all the images are at least twice their display size, and the site works fine in chrome:

That's better...

I'm probably going to have to redo this site from scratch (probably seriously trying to relearn everything I know this time) because I found out what it looks like in firefox.

:(

But how do I avoid this next time? The blurry text, that is. Is there some CSS text property I should include to make the text rendered the same on all platforms?

deanboysupreme
  • 77
  • 2
  • 12

1 Answers1

0

PNG images definitely scale better, but you could also try using retina.js which serves higher quality images to devices with retina displays (it looks like your main title is an image which would explain that being blurry too, but I can't load it to see). Have you thought about using Bootstrap CSS to ensure cross-browser compatibility?

Have a look at these:

http://getbootstrap.com/ - about Bootstrap

https://wrapbootstrap.com/themes/portfolios - some ideas for cross browser compatible layouts

It doesn't work at all in Internet Explorer either which you might also want to look at - I try to cater for it due to the market share (https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0) but using Bootstrap or another similar package would fix that and ensure it looks the same on every browser and every device.

Lyall
  • 1,367
  • 3
  • 17
  • 42