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!
Related
I built sites and want to make it mobile responsive.
It is perfectly working on Chrome and Firefox but not on mobile.
I tested on Inspect though it is working properly on desktop browsers but not for mobile.
How can I fix this?
First and foremost, you should add a viewport on the HTML page.
Type this inside the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
Then, I personally think it's better if you link a bootstrap.css file. And I also recommend to use the media screen of CSS like this:
#media screen and (max-width: 800) {
/* The CSS codes when the device is less than 800 go here */
}
At least, that's how I do it.
And you can go and download or watch the video that I saw on YouTube. I don't remember it's name or link but its length is over an hour and the guy was making a webpage of a gym website.
I highly recommend to type these on your own rather than copying and pasting it, it will help you understand what each thing means, to not forget the codes so that you don't refer these kind if simple things.
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 have a website that's working on 1200px(large desktop) screen. Now I would like this to be worked on different screen sizes and browser window sizes.
Issue : When I reduce the screen size, some tabs that are on my website go invisible.
How do we do it in Rails. I have searched and found out that CSS - media is the only way to do it . This way we have to write different css files for each screen size. Is there an efficient way to do this in rails? .As in, size of the elements change dynamically based on the screen size with out the change of CSS files?
Thanks!
I think Twitter bootstrap is an easy way to create responsive website.
This is Twitter bootstrap gem for Rails.
And this is Basic tutorial (Railscasts).
So you can follow the tutorial to get start and you can do it in advance when you understand how it work.
This might solve your problem..however i am not sure but it wont hurt to give it a shot...
This will resize your website accordingly you device size.
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add these in your between HEAD tags
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