Viewing Testing my new website! Solutions to view it smaller on some screens?
Testing my new website! Solutions to view it smaller on some screens?
|
User: David P. 10 years ago
|
|
|
Hello! The new design of my website is already published, although I'm still testing it! Some sections are not finished yet and the site is, for now, only available in spanish. But if you want you can have a look to it here: http://www.davidpratsjuan.com What do you think? I feel that, perhaps, the design is too much big. I was creating the site with an iMac 27", where I think it shows beautiful. But when trying to visit it with a a little screen, like my old MacBook Pro has, I think the buttons, pages, letters... all content it's showed too big in my opinion. I don't know if there's any easy solution to this. I know that browsers have an option to zoom out the sites. With just one touch of zoom out, it fits better in screens smaller than my iMac 27". But unfortunately, I'm sure many visitors don't know that browsers have this capabilit. So, I'm thinking about possible solutions, but I don't know if they are possible using code: 1. To put visible buttons on the desing like + or - easy to acces by the user and let them to zoom out and zoom in the site just what they want. Is there any code to do that? 2. To stablish automatically a zoom out level to the site depending the resolution of the screen where it's visited. Something like "if resolution is bigger than XXX x XXX, then zoom 100%", "if resolution is smaller than XXX x XXX, then zoom 75%". Is there a code for this? This shouldn't affect mobile devices, because on iPad now is showed very well. 3. Any other solution I don't know and I can't imagine but you, masters of web design, kindly recommend me. Thank you very much and waiting for your impressions and suggestions. |
|
|
User: Jumbo T. 10 years ago
|
|
|
Paste this code in the Footer Code box of the page or site. Use as many if else as needed. Change the numbers of the zoom. After testing, remove the alerts. <script type="text/javascript"> function zoom() { alert(screen.width); if (screen.width <= 800) { alert('<= 800 : ' + screen.width); document.body.style.zoom = "50%"; } else if (screen.width <= 1024) { alert('<= 1024 : ' + screen.width); document.body.style.zoom = "70%"; } else if (screen.width <= 1280) { alert('<= 1280 : ' + screen.width); document.body.style.zoom = "90%"; } else if (screen.width = 1920) { alert('<= 1920 : ' + screen.width); document.body.style.zoom = "100%"; } } </script> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" onload="zoom();" style="max-width: 1px; margin:0px;padding:0px;" /> Last edit 10 years ago |
|
| Post Reply |
| You must login or signup to post. |