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
Related
I've implemented Media CSS in my website and when I resize it in Chrome-Devtools it adjusts fine.
But when I try it on mobile it shows like in a full desktop page.
Here's my website:
dinf
when resizing the page in Devtools:
When simulating mobile
Can you please explain how can that be?
Just add the following line to the head tag of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It allows elements and fonts to correctly scale on mobile devices. I suggest you to read this article about it.
I've built a site using media queries to make it responsive and whilst I've been developing it I have changed the width of the browser to test the page and the media queries seem to work fine with the break points I have set.
Problem is though, when testing the actual page on the iPhone, it doesn't seem to be recognizing the media queries at all and the full desktop view is shown in the browser instead.
Why ideas why an iPhone would do this, any mobile phone for that matter?
Here's the Litmus browser test result I have: https://litmus.com/pub/b78644d
Could take it a step further with
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I'd also recommend wiping out some of those !important(s), at least off of the widths you've set, so the responsiveness plays nicely.
Annnnnd Chrome has a sweet (relatively new) emulation tool built in that you can mess around with and use it to view your site scaled down to mobile as well - it's tucked in next to the Javascript Console.
Solved the problem adding this line to the head in the HTML:-
<meta name="viewport" content="width=device-width">
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
care-24-7.com/Test/
I have been trying to get my new site template to adapt to mobile devices. So far it works when I resize the browser window. Problem is it doesn't work on mobile devices. It displays as a regular web page.
You need this
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
You Don't wan't maximum-scale=1.0,user-scalable=no as the user won't be able to ZOOM in
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Have a look at meta view-port tag.
Add this to your page for quick resolution.
<meta name="viewport"
content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no' />
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!