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' />
Related
everyone! I am working on a project that is based on this template. Everything is OK on the template except for the login page. The problem there is that when someone opens the site over the phone, the page comes out like on a desktop. I opened the original template's login page from themeforest and saw that it is actually responsive, but not for me. Where can the problem lie? Unfortunately, I can't share a link to my project, as it is for a customer.
To view the login page that I'm using - click on Pages and then Login
Probably you are missing the viewport meta tag in your html head.
The viewport meta tag is needed to control the dimensions and scaling of the web page. In your case the display of your login is controlled by media queries, e.g. max-width: 920px. The phones actual resolution is probably higher than that. By adding width=device-width you essentially tell the browser on the phone to scale the page down to the actual screen size, and not use the resolution for the media queries.
It is worth noting that you can add more settings to your viewport meta tag, e.g. to control zoom (you can find more info here).
<html>
<head>
<!-- other header stuff -->
<meta name="viewport" content="width=device-width">
</head>
<!-- document body -->
</html>
insert this into head tag
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
Add this HTML Viewport to you <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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'm working on a project that needs 4 different layouts:
Desktop+Laptop;
Tablet landscape;
Tablet portrait;
Mobile.
For the testing purposes I'm using Opera browser and its page zooming. And in Opera (as well as all the other browsers on my laptop) when I zoom the page in and out, the layout changes correctly. But when I open the same page with my smartphone and tablet, it just displays the Desktop layout. My project's temporary address is:
http://tiip.dit.rs/tiip2
Does anyone have any ideas what am I doing wrong?
Try to add the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
You can get some more information about this tag and why you need it by googleing
"viewport meta tag"
In chrome if you open up the developer tools, there is a little cog in the bottom right corner. In the settings you can choose user agent, which will make chrome behave similar to different devices . hope this helps
I think this link may be more helpful to you
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
And for initially to your HTML
Add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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