I'm trying to make different dimension of one modal.
If I resize in the Browser the change is what I want.
But, if I change the Chrome to simulate a mobile environment or if I open the code at my phone it doesn't work.
I the example I tried to make a mobile first approach. My dialog-content is white as default. Then I change to blue if the width is bigger than 750px and to black if is bigger than 1000px. I make other change too but the color is the important one in the examples.
I would like to know why my "default" case is not working for mobile.
The code can be found here.
Try adding viewport meta tag in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- ... -->
</body>
</html>
Related
everyone! I am working on a project that is based on this template. Everything is OK on the template except for the login page. The problem there is that when someone opens the site over the phone, the page comes out like on a desktop. I opened the original template's login page from themeforest and saw that it is actually responsive, but not for me. Where can the problem lie? Unfortunately, I can't share a link to my project, as it is for a customer.
To view the login page that I'm using - click on Pages and then Login
Probably you are missing the viewport meta tag in your html head.
The viewport meta tag is needed to control the dimensions and scaling of the web page. In your case the display of your login is controlled by media queries, e.g. max-width: 920px. The phones actual resolution is probably higher than that. By adding width=device-width you essentially tell the browser on the phone to scale the page down to the actual screen size, and not use the resolution for the media queries.
It is worth noting that you can add more settings to your viewport meta tag, e.g. to control zoom (you can find more info here).
<html>
<head>
<!-- other header stuff -->
<meta name="viewport" content="width=device-width">
</head>
<!-- document body -->
</html>
insert this into head tag
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
Add this HTML Viewport to you <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have an issue where a web page I have build using the Google Maps API, which shows me a correct viewport when viewing the page in Responsive Design Mode (same in FirefoxDeveloperEdition, Chrome and Safari), e.g. ~320x568 for an iPhone 5s. However, when I actually view the page on an iPhone 5 I get a viewport of 980x1461, which makes the page impossible to view on a phone.
I'm using window.innerWidth and ditto height to access the viewport and get it printed on the web page (source of the numbers above).
Any hints on what could be going wrong?
Do you have viewport meta tag in the head of your page? eg
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
<body>
...
</body>
</html>
More info about this meta tag: https://developers.google.com/speed/docs/insights/ConfigureViewport
Good luck!
I'm using Materialize for my navbar. I'm attempting to make the navbar collapsible into a sidebar on mobile as shown here. It does collapse into a sidemenu, but the navbar is too small on mobile as shown here. How do I make the navbar narrower and taller so it is more usable on mobile? I'm also using this with Meteor using the materialize:materialize package if that is relevant.
Adding head tag with viewpoint meta tag (once) before any given <template> tag solved the issue for me. Meteor, prior to rendering the page, looks up all head tags and adds them into header, and to display properly on mobile, you need viewpoint meta tag:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.
I've created some media queries, that behave correctly in a browser when resizing on a desktop.
On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?
Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:
http://www.preview.brencecoghill.com/
Do you have the meta for view port in your html?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
I think you'll find a warning in Chrome with ; instead of ,
This should work just fine:
<meta name="viewport" content="width=device-width, initial-scale=1">
I just experienced the most bizarre thing after troubleshooting this same problem for a day. Something to try if all else fails...
My pages were perfectly responsive on my laptop during development but not on my iPhone, iPad or Samsung. I finally discovered I had to put a comment line after the DOCTYPE statement and before the html lang statement, like this:
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
Finally, my pages were responsive on the mobile devices. Weird!
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