I have an HTML/Bootstrap/JavaScript project that seems to scale in such a way that it looks best at 125%.
Is there a way to force the browser to start at 125%? I've tried
<meta name="viewport" content="width=device-width, initial-scale=1.25"/>
But that did not seem to work.
Any help would be appreciated.
I wouldn't recommend giving your page an initial zoom. It is an unnecessary hack that could look different across browsers, but even if it looked the same, why not use CSS and HTML to give the page the look you want? Zoom is an accessibility feature for users and shouldn't be controlled by the site itself. You could just rewrite the CSS so that it has the same look as the 125% zoom.
And to reiterate, cross browser issues are also a problem, which is another reason to just use CSS/HTML to get the effect you want.
Related
I know similar questions have been asked but I have found no solution of any kind for my issue. I am building a mobile web app that has a google map embedded into it. My issue is that if a user double taps on it to try and zoom the map (which basically takes up the whole screen) it, in some cases, zooms in the browser instead of the map. Then the trouble is that the user is unable to zoom back out. Using two fingers to zoom out passes the event to the map instead of the browser and then renders the web app useless. Reloading the page keeps it zoomed in. I understand that browsers typically don't allow the script to change the browser zoom because 'controlling UI for the user is a bad idea' but in this situation I am saving the user. I don't want to do it while viewing the page, just either on load (the user will undoubtedly try and reload when they can't view/use the web app right) or on a button click.
To the best of my knowledge after quite a bit of googling on this, it is indeed not possible to change the browser zoom once the page has loaded. However, you can make a request to the browser, prior to loading the DOM, to start at a certain zoom level and/or to limit the zoom. Here is the meta tag I used to do this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
I think for the most part the attributes are pretty self explanatory, and if you are needing more/different control I'm sure there are more options to play with. Also, keep in mind this is also entirely up to the browser on whether or not it wants to follow this.
I know this is an old question, but after trying all the proposed methods, nothing seems fit.
Basically, I built this webpage, it looks fine when just loaded with a mobile device, but after screen rotation the size stays the same, (which it should not!)
1:
The first method I tried is adding the meta tag:
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=1" />
But apparently this does not work
2:
Then I tried window.location.reload
This works! Just perfect. But it basically reloaded the whole page, and all the previous setting will be reset to the default, this is not what I want!
3:
I see someone suggesting writing two sets of css, one for landscape and one for portrait. However, this is a lot of work right?
And, in my css I did not set a lot of explicit height and width anyway. Usually it's default, and sometimes in percentage. Is this a problem?
#
It will be great if someone explain a little what actually happens when the screen rotate? Why elements are not resized properly? And on contrary, why they will be resized properly if a reload event is triggered?
This depends on which mobile browser you're testing on; some mobile browsers, notably IE10, don't report a change in screen size when the orientation changes. However, as you found out the browser does recalculate the screen size when the page is refreshed.
If you can tell us about the browser, maybe we can help more?
I am running into some issues determining the type of browser using Javascript. My current method is to capture the screen width and height and determine the type of browser based on pixel sizes.
I figured I could assume that any screen width under 768 would be mobile, anything under 1024 tablet, and anything above that a desktop.
I've started testing on a few devices I can actually get my hands on and the results are much different. For instance on an android (Droid Bionic to be exact though it doesn't matter much) its returning a width of 980 regardless if the device is in landscape or portrait mode. This is much higher than I assumed.
Currently I am using document.documentElement.clientWidth to determine the width but I have tried other approaches such as window.innerWidth as well.
I guess what I am trying to get at is a question that has been asked many of times and I thought I had a pretty clear answer to. Apparently it might be time for a refresh on proper browser/device detection. So what is the most effective way to determine the actual size of the device I am on?
UPDATE:
It seems as if mobile browsers are actually taking it upon themselves to decide how to display my application. And in fact they are, but there is a way to stop it. See answer. Fortunately this means that the standard feature detection methods we are used to are still the best way to determine the device you are using.
Per Dagg Nabbit's comment on the question:
It seems that mobile browsers take it upon themselves to determine the way a site is displayed. This typically means taking a desktop version of a website and zooming out to fit the contents on the screen. For 90% of the internet this is necessary otherwise the mobile browsing experience would be horrifying. For responsive websites this is no good because in most cases we have very specific elements that must be altered depending on the resolution of the device the site is being viewed on. So how do we stop the browsers from doing this?
By using a viewport meta tag. The standard tag looks something like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But there are a lot of different ways you can customize this to suit your needs. A good reference is https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
I want to use transition effect on hover for IE 8 like in this example:
http://jsfiddle.net/evcL2/10/
According to this site (is working only on ie) that is possible (use trasntion option and fade effect) but I am not able to use it. Can someone help me a little bit with that script, for me is simportant to have that transition on hover only for background color.
Thank you.
IE8 doesn't support CSS3 transitions. You'll have to fake it using JavaScript tweens, or settle for IE9 support. IE8 users don't deserve nice looking websites anyway :-)
But if you're in the awkward position of being tasked with creating IE compatible stuff, take a look at this MSDN introduction to Filters and Transitions. It appears that even the IE specific transition filters require JavaScript to work, so you might as well go with the proper JavaScript solution of using jQuery.animate. With a small plugin it can animate colors. Here's an example on JSFiddle.
For some reason the website you suggested doesn't render properly in my browser. However, I think you may be attacking the problem wrongly. I would use jQuery's $.animate() function for this, as it is very cross browser and can animate gradual changes in many css properties.
I am working on a site that must be designed with mobile accessibility in mind. As part of our brainstorming, we wondered whether it's possible to detect, for a mobile browser (i.e. Mobile Safari or the Android browser), when the viewing device has changed orientation, and to use that as a trigger to change page content? As the title of this question implies, our best-case scenario is the ability to detect the orientation change and use it to alter the CSS on the fly so as to present a slightly different page for landscape versus portrait.
Of course we can just design for a page that looks good one way and make it obvious that it's supposed to be viewed that way, but the cool-stuff factor of a page that looks good either way is pretty appealing.
Is this idea implementable? Practical?
Yes, this is answered in a more general question.
To summarize, you would listen with Javascript to the orientationchange event, and switch the styling in the event handler, depending on the value of window.orientation.
You can also use media queries to do this without any JS at all - see http://davidbcalhoun.com/2010/dealing-with-device-orientation
Make a fluid style that would adjust in any case..
You would have to give a more detailed description of issues you want to solve so we can suggest more detailed answers..