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/
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.
juniorgoldreport.com is the website I'm working on and it's made in wordpress.
I'm using this plugin specifically - http://shiftnav.io/free/
The plugin for mobile nav bar is incredible, I enjoy it's functionallity and ease of use greatly.
It has a setting to set when to show the toolbar, I chose to show it at 960px. The only change that I have done to it.
When I resize my desktop window, the navbar apears (I haven't done the necessary changes to remove the header and old nav when making the new one apear). So far so great.
The issue is, on mobile view, the navbar doesnt apear. I'm going to assume the plugin is using
#media (max-width:960)
vs
#media on screen and (max-device-width:960)
But I'm not totally sure. Anyone have any idea's as to why it's happening?
EDIT - images to get you a better understanding.
The nav bar when a desktop window is rezied - it apears (yay)
The nav bar DOES NOT apear on mobile devices though - I'm not sure why
In short: your site is not actually responsive, because the viewport meta tag is missing, so the site displays at a 960px width on mobile devices. Since that is above the breakpoint, the menu does not display.
The issue is this typo in your site head:
<meta name"Keywords" content="Gold reports resource stock news and top gold articles"
<meta name="viewport" content="width=device-width">
The Keywords meta has two syntax errors a missing '=' after 'name', and a lack of closing >
As a result, the viewport tag is never read by the browser, so it has no effect. Without the viewport tag, the viewport is displayed scaled on a mobile device, rather than responsively. Since the mobile viewport is displayed at 960px width, the media query does not apply, and the menu remains hidden as it would on a desktop screen.
Fix the syntax errors in the first meta tag and the issue is resolved.
<meta name="Keywords" content="Gold reports resource stock news and top gold articles">
<meta name="viewport" content="width=device-width">
Hope that helps
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
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