I have website 1000x820
It's not a real website, don't ask me about responsive web design.
viewport:
<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">
Then on Iphone SE with iOS 10.
Add to Home Screen.
Launch the application with 1000px width and it view very good with both orientation and we can change it. Of course we can't zoom.
Focus an input and type text. While nothing zoom. Unfocus the input or change an orientation and our scale will be broken. We can't change it.
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">' );
It didn't help me.
Perversion with fonts too.
I've one bad idea. Trace changes of viewport and refresh the page.
You're meta tag includes user-scalable=no and an explicit width.
Remove the user-scalable and update width to width=device-width. You can use initial-scale=1.0 to set a zoom level for devices.
MDN - Using the viewport meta tag to control layout on mobile browsers
Related
I've built a web page which displays a grid. On the regular screen (laptop / desktop), the browser is at 100% zoom level and the UI looks fine.
However, when I connect my laptop to a projector, the browser automatically sets the zoom % to 125% and everything is bigger and scroll bars appear everywhere.
I don't understand what this behavior is based off or where it is coming from. Is it due to the resolution change?
Is there a way for me to make sure my UI does not get zoomed when I connect to a large screen?
Thanks
You should be able to avoid scaling on certain screens by setting the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Most mobile pages are served with meta viewport sizes, e.g.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> Which will simulate 320px on width for iphone backward compatibility reasons...
but when i check via javascript window.screen.availWidth running on and android emulator for example, i get some value like 720, but a 320px image covers the whole screen.
How to i get the actual width being used by the document?
I just tested on my Android emulator, and it returns the wrong value when the page is loaded first time. I used this trick to get the right value.
setTimeout("your javascript function",200);
I executed my function after 200ms and I got the right width and height. I didn't try any other duration than 200ms so you might be able to get the right value in shorter time.
Hope this helps.
I have a responsive layout with a fixed header. When scaling (zooming) is enabled via the viewport meta tag, the layout can break when the user zooms because the header also zooms - which is BAD. (I wish I could keep just the header in place without scaling no matter what the current scale setting is). Anyway, that's why I'm use the following meta tag that disables scaling:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My goal is to implement some sort of media viewer like Facebook that overrides the viewport settings of the document. Upon closing, it should restore everything back to normal. I tried opening an iframe that loads a document that can scale, but it seems like the parent document overrides the iframe.
FYI, I'm using jquery.
Just discovered that with jQuery you can do this:
var meta = $('meta[name=viewport]');
$(meta).attr('content', 'device-width, initial-scale=1, maximum-scale=5');
I could get more fancy... like getting the original setting first and then restoring it when you're done. I tested this on iOS 6 and it works. I have not tested it on other devices.
I was wondering what you guys and gals would recommend as the most efficient want to dynamically rescale a website based on resolution?
Is there anything that rescales elements AND images?
Or do I need to do those separately?
I've been trying to use percentages and em's, but it seems like a huge hassle. Are there any scripts?
I've been searching for quite a while and haven't found anything that quite fits yet.
New Media Queries are landed in CSS3 specification. You can read an awesome article on the subject from A List Apart Magazine (with example, try resizing your browser window)
There are also existing scripts of course.
The best way to detect the orientation of the device is by using meta tags. The viewport meta tag is used by Safari/chrome on the iPhone and iPad to determine how to display a web page. Following are the properties of the viewport
The viewport width to the width of the device by adding the following declaration to the head of your HTML file
<meta name="viewport" content="width=device-width">
To set the initial scale to 1.0, add this to the head of your HTML file:
<meta name="viewport" content="initial-scale=1.0">
To set the initial scale and to turn off user scaling, add this to the head of your HTML file:
Utilize the viewport meta tag to improve the presentation of your mobile browser. This meta tag sets the width and initial scale of the viewport. Add the appropriate viewport meta data to the head of the document to instruct the browser to present your content in as large a context as possible on the device’s screen. If you don’t set the viewport width, the page will be zoomed way out when it first loads.
Full Screen Mode
<meta name="apple-mobile-web-app-capable" content="yes">
If content is set to yes the web application runs in full-screen mode; otherwise, it does not. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
When I double-tap near the edge of a page that exceeds the height or width of the browser window in Safari under iOS4, it zooms in or out and/or scrolls up, down, right, or left, depending on the size of the page and the current viewport position. How can I prevent this behavior, please?
I'm working on a site where this is (very) bad; we're preserving several layers of menu state and scrolling horizontally to navigate between layers. Double-tapping hoses the layout, and there's no intuitive way to get it back.
Double-tap does not seem to fire a scroll or touch event as far as I can tell. Other things I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
... with variations:
user-scalable=no
user-scalable=0
width=device-width
width=320
It looks like making absolutely certain that none of my important elements--I have a static header, scrolling body, and static footer, and the header and body can both scroll sideways--actually exceed the viewport width and have overflow:hidden seems to have done the trick.
Very sad there's nothing official on this, because it's annoying, and breaks most of the other examples I've found online
You have a small typo in you meta tag, between each setting you should use comma. ex.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
I find that the <meta name="viewport" ...> tag generally works on iOS to prevent scaling with double-tap but on the iPad3 on iOS 5.1 there are occasional rare circumstances, which I have difficulty reproducing, where the double-tap zoom gets activated and subsequently screws up the page layout. The behavior is quite buggy. Perhaps using Javascript to manage tap events can help to prevent this from happening while we wait for Apple to fix this. It's difficult to test without having a way to reproduce the bug though.
Disclaimer: I have not tested this method.