I have the problem that my website is resizing correctly when I change the viewport in chrome or go to it directly on my phone.
It does work however when i just resize my browser window.
This is the website http://maxehlers.com/test/ if you would like to try it out.
Most stuff on the website is set up with percentages for with and height.
How can i make the website act responsively when accessing it from a mobile device? Do I have to add media queries?
I think you are missing the viewpoint meta tag
here are the docs on MDN
something like <meta name="viewport" content="width=device-width, initial-scale=1"> should sort it.
There is more good info here on css tricks on resposive tags
Related
I want to make a embed version for my site at url https://staging.immo-suedtirol.com/jobs/?iview=embed
It work well on desktop view. but on mobile view it seem not work. I use developer tool to check and see: site width always in 980px This is what I see on developer tool. Content width always fixed to 980px for small screen view.
This really strange. This is first time I get it.
You must add meta tag in the html header for screen width
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
I've created a test site. I've used media queries in css but when I load the page on mobile, I don't see the mobile version and when I re-size the browser the site is responsive. I've read at multiple places to not to use *-device-width. So, what am I missing? What could be the resolution?
Add this to the head of your website:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will set the width of your page to follow the screen width of your device.
It was my mistake. I used javascript to override meta tag and it was causing issue in proper responsiveness. Fixed javascript.
I'm using Bootstrap for a website and I notice that when I view my layout on a mobile device, my mobile's web browser automatically zooms in to a particular top left corner portion of the webpage. I want the browser to show the whole webpage at start instead of zooming into the top left corner. Showing the whole webpage (albeit may be a little small in size) is the default behaviour when I don't use Bootstrap.
Is it possible to get Bootstrap to show the whole webpage instead of zooming in to the page when first entering it on a mobile device?
This most likely has to do with the viewport being set. Assuming your webpage is a standard size, you can use:
<meta name="viewport" content="width=1024">
make sure to place that in the head of your page - or replace the one that is currently there.
I believe you're looking for the Viewport html tag: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
You can disable it by removing the viewport meta code from your . This worked in my application. If you want to have it correct for your device, put this in into head tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://getbootstrap.com/css/#overview-mobile
http://getbootstrap.com/getting-started/#disable-responsive
I'm trying to fix some pages on my web design and ran into an issue where the sidebar banner ads that look fine on my regular desktop browser seemed to display "off the screen" on the iPhone and Android devices. The issue seemed to go away by setting the viewport meta tag to a higher value (e.g. 1300). While no side-effects have been found yet I was curious if setting the tag to that high a value was indicative of a bigger design issue?
<meta name="viewport" content="width=1300" />
You should be using this meta tag:
<meta name="viewport" content="width=device-width">
Since if you are viewing your site on a mobile device, for example, your website will be tiny and unviewable.
<meta name="viewport" content="width=1300" />
What your meta tag does is to say to the browser,
"No matter the width of the screen this website is on (viewport width)
render it as though it were a 1300px wide screen."
What that will do is "zoom out" if your viewport is less than 1300px and "zoom in" if the viewport is greater than 1300px.
Now, it sounds to me that if you are using this to fix your layout, you have bigger problems. I highly recommend you to look into bootstrap as a way to make your layout responsive. Bootstrap is a library of css files that you add to your site to do quite a few things, one of which is to create a fluid, responsive grid system.
I recommend starting here to learn about bootstrap and what it can do and then google search some articles. Everyone loves it! Trust me, once you realize how simple it can make your life, you will love it too.
http://twitter.github.com/bootstrap/index.html
I'm making a theme for a site where I can't change the markup or include any JS. I can only control the CSS of my theme, and I can write some HTML inside the page body only.
I'm trying to make this theme responsive, but I can't see how to control initial-scale or page zoom on handheld devices without a viewport meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
So what happens is that even though I can apply a mobile-specific layout through CSS #media queries, the site is zoomed out when viewed on a phone. Text and images are too small until you zoom in, and once you zoom in, the layout is too big and there's a horizontal scrollbar. It looks perfect inside a resized browser window on desktop; the issue is that the phone browser automatically scales the page.
So I'm seeking a workaround. I have two lines of thinking currently, and I'd welcome any other suggestions:
Is there any way to do what the viewport meta tag does in CSS alone?
Can I force a max page width in my mobile-specific styling so that mobile browsers will not scale the page?
There is #viewport, it might help you with that. But the support is very little. Have a look at this link http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/