I am building a web application using Materialize as a framework. The fact is that the web application looks good on a computer screen, and even on a browser simulating a mobile screen, but very small on a physical mobile screen.
The only solution I have found has been to add a media query in the CSS file like this
html {
zoom: 2;
}
I also included the meta tag just after the head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The result is not bad, but the problem now is that some Materialize pop-ups (such as date pickers or time pickers) and text fields appear cut off
I'd appreciate any help
Related
Perhaps a bit foolishly, I have chosen to do my portfolio site with two technologies that I have never worked with before - Tailwind and NextJS.
while developing the portfolio, I have opened it via my mobile browser and was surprised to see that the components are rendering on half screen only. This does not happen when I refit the device width manually in the browser on the desktop.
In index.js I have the following meta tag, which I thought could fix the issue
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Would anyone have idea why that happens?
My code is deployed to github
Many thanks,
Zan
Your parent images have a fixed width, try to remove it, or add max-width.
I've implemented Media CSS in my website and when I resize it in Chrome-Devtools it adjusts fine.
But when I try it on mobile it shows like in a full desktop page.
Here's my website:
dinf
when resizing the page in Devtools:
When simulating mobile
Can you please explain how can that be?
Just add the following line to the head tag of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It allows elements and fonts to correctly scale on mobile devices. I suggest you to read this article about it.
I used Bootstrap for groundwork to develop the site to be responsive. The problem i have encountered is that when I try to watch to watch a site on mobile or tablet device the site wont response to the screen resolution. But when I try the Responsive Design View on Mozilla it all works fine. They order of included css files is Bootstrap, then my custom css and some custom query css which I used to tweak some content things.
Do you have the following within your head of your page?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If the above does not work can you please paste some code from your page for us to see what the issue could be? Thanks.
I used to start my work using html5-boilerplate instead of creating file from scratch. It is awesome for responsive web design.
I am developing a non-responsive website and client needs desktop version for mobiles too (remember how websites opens on mobile few years ago).
I did not make it responsive and do not add any styles in media queries.
I works fine on desktops but when we see the website on a mobile device(or less 940 px wide screens) it does not show complete backgrounds of full width containers(i.e. 100%) instead it only show the background according to width of device.
I am not sure but I think there is problem in following code which is meta viewport:
<meta name="viewport" content="width=device-width" />
I removed this code and test the website but problem remains. Can any one please tell me the solution?
Note: I have build the most of site and now I can not write markup from scratch.
I have found an easiest possible solution to this and its working for me. I just added following code into CSS file (my media query section of at bottom of main.css in case html boilerplate).
#media only screen and (max-width: 900px) {
/* Style adjustments for non responsive websites */
body{width:940px;}
}
Try changing it to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if it works!
I am new to mobile web app development, I wrote a small app in jqueryMobile & asp.net, but I am having problem with screen height, when i test my app in opera emulator then for large screen sizes my app look small in size, is there a way to detect & adjust height & width so it looks like a native app & fills the entire screen.
Without knowing how your css markup looks like try adding the following meta tag:
<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
This will make sure your page starts in the correct scale (and disallows pinch zoom)
You can read the css trick to make the CSS target screen sizes
http://css-tricks.com/css-media-queries/
Try adding the following snippet:
<meta name="viewport" content="width=device-width">
From what you said that should fit your needs.
You can find more info about the viewport meta tag here https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
There are also some other meta tags you might consider.
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
Most of this I learned from exploring the html5 mobile boilerplate. Which is a rock solid starting point for any mobile application. If you haven't checked it out before I believe it will help you out alot http://html5boilerplate.com/mobile