[Pro] Magnifying glass effect

Hi everybody!

I have designed a website using a fixed width resolution. It works fine on most browsers and looks great (at least in my mind).

However, on some systems with very large screen resolutions, the text appears relatively small and the site looks a bit lost.

On modern browsers like Firefox and Safari I see the option to enlarge a website. Not just the text parts, but the entire site including images.

I wonder if it is possible to build this effect with JavaScript or access the API (is this correct term?) of the browsers to tell them to enlarge the website if a given screen resolution is used?

Any help is appreciated. :slight_smile:

Thank you,
Carsten (from Hannover, Germany).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

First answer here is the most given one: “Could you supply us with an url”?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

and looks great (at least in my mind).

The zoom level of the browser is something that is strictly the domain of the user - it is bad practice to interfere with user-level choices such as page zoom, and usually you are technically unable to do so anyway. A user will zoom a webpage because they wanted to and an individual site should not (and can not) interfere with that choice.

Instead of trying to influence the user, you should seek to design your site in such a way so that a user doesn’t need to zoom to get a good experience.

There are a few things that will drive me away from a site (never to return) - 1 is Browser window resizing, another is auto start music I cant turn off. A definite third would be someone messing with my Browser preferences!

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

@Richard: No URL, I thought of simulating the effect of some modern browsers when pressing CTRL + or CTRL - (respectively CMD on Macs).

@DeltaDave: Many users aren’t aware of the ability to zoom in or out of a webpage. And in my mind this is an easy method to make a site responsive to the screen size.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I found a method of doing this with CSS:

html { zoom: 1.8; -moz-transform: scale(1.8); -webkit-transform: scale(1.8); transform: scale(1.8); }

It seems to work great, but what I want to achieve is to have two buttons or text links where the user can control the zoom factor.

Unfortunately, my JS knowledge is quite limited, so any help is appreciated:

  1. How can I call the CSS with the tag ?
  2. How can I remember the current zoom factor to have some kind of “Increase zoom by 10%” ?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

in my mind this is an easy method to make a site responsive to the screen size.

In your mind - maybe?

Not so easy in the real world!

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

@DeltaDave: Can you explain this closer, please ?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Maybe I should say that I don’t want to get a phone-optimised website. I have much text and images that are requiring a larger screen.

It should just provide a way to enlarge the site if the screen resolution is quite high to make it easier to read.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The feature in question already exists-- and it’s built into all modern browsers. Users can set the zoom level of whole pages or just actual text… Check out the View menu of whatever browser you are using.

Instead of reinventing the wheel, you might be better of informing viewers who are ignorant of how their browser works and empower them to a whole new level of internet access.

Perhaps instead of buttons to scale things, how about a link which says “How to get the most from this site…” which leads the user to a page chock-full of ideas one tips for how they might maximize their experience there. This would clearly be adding user value to your site.

But for now, I’d say “mission accomplished” as far as your search for a zoom feature for your site. And it’s already built-in.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options