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.
Related
I'm creating a simple PWA, and I'm trying to make it looks like a native mobile application though I'm having several problems with the pinch-in.
I've added this code to my layout.html (I'm using Flask for the backend)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Although it really works as I want, there are some images that I want the user to be able to zoom in, and I know is not recommended to disable the scalable zoom for mobile but really, this is what I want, no zoom on the entire page apart from the imgs tag I have.
I'd like to have a pure css/js solution or at most something that does not need npm even a cdn is good for me
Set height and/or width of elements that ARE NOT images to vh or vw.
https://www.w3schools.com/cssref/css_units.asp
vh - viewport height - represents fraction of screen height. When you zoom in - (for example) font stays the same size
div {
font-size: 2vh;
}
I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
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
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 developed a web page for PC and I wanted it to be compatible for iPad as well. However I did not do specific additions to my page for iPad compatibility. I only added the meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />
When I view the site in iPad landscape mode, on the page load, it looks good. But when I switch to Portrait mode, the page looks cut off. When I switch again to landscape mode, the page looks cut off still further.
What other practices should I follow to make my page iPad compatible.I'm looking for recommendations/best practices on using %widths and things like that.My elements are currently of maximum 954px. Should I necessarily use % widths for iPad compatability? Any other helpful tips?
initial-scale=1.0 means your page will load 'full size' which is too wide in landscape mode. If you use that meta tag, you would usually use it in combination of sizing the page width to the exact dimensions of the screen. Since you are not, I would not use that meta tag at all and let the iPad's browser load the page normally (the browser will handle fitting it to the screen for you).