According to my research, Bootstrap 3 is supposed to be mobile-reponsive by default. However, when I try to visit my Rails 4 app (deployed on Heroku) on my iPhone 5S, it looks exactly the same as the desktop layout (with smaller text).
App: http://wheels2015.herokuapp.com
Github repo: https://github.com/yamilethmedina/wheels_registration
I would add more specific code, but i'm not sure what portion of the massive bootstrap.css file would be relevant to this.
It's difficult to say for sure using just the information in the question you posted, but my guess is you forgot to set the viewport.
Quote:
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">
You don't use bootstrap grid system.
It will ensure correct placement of your elements depending device resolution.
bootstrap grid
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.
here is a webpage that I ask about
I use Meteor (Coffeescript + Jade + Stylus) with MaterializeCSS as front-end framework. I use grid (I think) properly. You can reproduce the problem I am facing by going there and resizing the web browser to the the mobile size. The grid will nicely adapt.
But when you try to actually go there on a mobile device the collapsible button will show but the rest of the page will look exactly like on a desktop making the page unreadable.
Any tips? Is this Meteor's fault or Materialize's? Also if you take a look here:
marky.meteor.com <- it will work and behave as intended and that page ALSO uses MaterializeCSS.
Any ideas why that happens and where the problem might lie?
Add this to your header:
<meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport">
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 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