Asked  7 Months ago    Answers:  5   Viewed   59 times

I have need to create 2 buttons on my site that would change the browser zoom level (+) (-). I'm requesting browser zoom and not css zoom because of image size and layout issues.

Well, is this even possible? I've heard conflicting reports.

 Answers

50

I would say not possible in most browsers, at least not without some additional plugins. And in any case I would try to avoid relying on the browser's zoom as the implementations vary (some browsers only zoom the fonts, others zoom the images, too etc). Unless you don't care much about user experience.

If you need a more reliable zoom, then consider zooming the page fonts and images with JavaScript and CSS, or possibly on the server side. The image and layout scaling issues could be addressed this way. Of course, this requires a bit more work.

Tuesday, June 1, 2021
 
JackTheKnife
answered 7 Months ago
24

navigator.saysWho = (() => {
  const { userAgent } = navigator
  let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=/))/?s*(d+)/i) || []
  let temp

  if (/trident/i.test(match[1])) {
    temp = /brv[ :]+(d+)/g.exec(userAgent) || []

    return `IE ${temp[1] || ''}`
  }

  if (match[1] === 'Chrome') {
    temp = userAgent.match(/b(OPR|Edge)/(d+)/)

    if (temp !== null) {
      return temp.slice(1).join(' ').replace('OPR', 'Opera')
    }

    temp = userAgent.match(/b(Edg)/(d+)/)

    if (temp !== null) {
      return temp.slice(1).join(' ').replace('Edg', 'Edge (Chromium)')
    }
  }

  match = match[2] ? [ match[1], match[2] ] : [ navigator.appName, navigator.appVersion, '-?' ]
  temp = userAgent.match(/version/(d+)/i)

  if (temp !== null) {
    match.splice(1, 1, temp[1])
  }

  return match.join(' ')
})()

console.log(navigator.saysWho) // outputs: `Chrome 89`

As the name implies, this will tell you the name and version number supplied by the browser.

It is handy for sorting test and error results, when you are testing new code on multiple browsers.

Tuesday, June 1, 2021
 
Francisunoxx
answered 7 Months ago
17

My best guess for why is that this is due to rounding errors as it scales down. For example if you imagine a box which is 250px wide and contains two boxes side by side that are 125px wide each. Clearly these fit side by side. If you zoom out so that you are at half size then the outer box will be 125px and the inner ones 62.5px each which rounds up to 63px half pixels are as small as you get). These two now come to a total width of 126px so no longer fit side by side and one would have to go under the other.

This is basically the principle you have at work here I think. The best solution that I can see would be to make the two side by side boxes narrower and float one to the right so that your right border is unbroken. this may mean a slightly bigger gap down the middle but that gap can hopefully absorb rounding errors as you zoom out...

Edit:

As you have noted the borders are the main thing causing confusion. They can be taken off of the outer containers and put on a nested container designed just to add borders.

http://jsfiddle.net/chrisvenus/pdQrQ/6/

The above is a fiddle (based on yours) which creates inner DIV tags that contain the border while the floated containers have no border at all. This now seems robust enough to work in IE8, FF7.0.1 or Chrome 14.0.835.202.

The things changed were adding the div to the HTML and swapping some classes around between it and its parent. There was a new innercontainer class that sets the height and width to 100% to ensure it fills the containing box (and thus the borders are where they are wanted. Also I changed the width of the bottom box so that it lined up correctly.

Let me know if this does you.

Thursday, July 1, 2021
 
pinaki
answered 5 Months ago
53

zoom is a non-standard property that has not been implemented by Firefox, the closest cross-browser property is transform (demo):

document.body.style.transform = 'scale(2)';

The effect, however, will be different from applying zoom: parent context (e.g. width, height) will not be updated. If that's your intent, you may want to consider using calc() and a multiplier on selected properties:

document.body.style['--zoom'] = '2';
document.body.style.fontSize = 'calc(16px * var(--zoom))`;
Saturday, July 31, 2021
 
weegee
answered 4 Months ago
83

Take a look at jQuery.browser: http://api.jquery.com/jQuery.browser/

The $.browser property provides information about the web browser that is accessing the page, as reported by the browser itself. It contains flags for each of the four most prevalent browser classes (Internet Explorer, Mozilla, Webkit, and Opera) as well as version information.

Available flags are:

webkit (as of jQuery 1.4) safari (deprecated) opera msie mozilla This property is available immediately. It is therefore safe to use it to determine whether or not to call $(document).ready(). The $.browser property is deprecated in jQuery 1.3, and its functionality may be moved to a team-supported plugin in a future release of jQuery.

Because $.browser uses navigator.userAgent to determine the platform, it is vulnerable to spoofing by the user or misrepresentation by the browser itself. It is always best to avoid browser-specific code entirely where possible. The $.support property is available for detection of support for particular features rather than relying on $.browser.

Sunday, October 17, 2021
 
dance2die
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share