I'm pretty new to web development and lately I have been playing around with media queries to optimise my web page when scaled down on various resolutions.
I use the responsive design view in Mozilla Firefox to test my website at different screen sizes but I am having a problem when actually coming to view on a mobile device.
As you can see by the two picture I have attached, when viewing on Mozilla Firefox on the same resolution as my phone (for testing) the display looks a lot larger e.g. the font-size seems to be larger than what it actually is when I view the page on my mobile device.
I've tried researching into how to optimise this without having to create seperate CCS sheets for various displays and would appreciate if someone could point me in the right direction.
Thanks in advance, Sam.
Image 1 : Firefox responsive design view
Image 2 : Mobile view
May be you are missing the viewport declaration?
<meta name="viewport" content="width=device-width, initial-scale=1">
If this doesn't work a fiddle might help see what the issue is.
Related
I have used a media query on my webpage and included a meta tag in my html to make it responsive for smaller devices as follows:
#media only screen and (max-width:768px){/*code for smartphones*/}
<meta type='viewport' content='width=device-width,initial-scale=1.0'>
NOTE: The media query code is to make the page viewable for smaller devices.
The problem is when I try running the code on the microsoft edge emulation tool or my smartphone the css code inside the media query does not run and as a result my webpage looks very small on small devices, the media query code only runs when I scale the browser window to a smaller size.
Please let me know how I should fix this so my webpage is responsive on all devices and tell me if I should elaborate more, any help is greatly appreciated thank you!
Originally what I wanted to do was to make the webpage responsive for mobile phones rather than different browser window sizes, I guess I should have mentioned that explicitly. I fixed that issue by using max-device-width rather than max-width, thought I would just share this for anyone encountering the same problem.
I'm currently trying to use CSS media queries to optimise my website for mobile view, and am using Google Chrome with an extension to resize the viewport on my desktop to adjust my content for mobile.
The problem I'm having is when i'm designing and changing on my laptop at the mobile phone resolution, everything works fine (see first picture) but when I actually load the website on my mobile, I'm not getting the same view as what I'm getting from the laptop (see second picture).
I've used
<meta name="viewport" content="width=device-width, initial-scale=1">
to set my width for mobile
I know the font is different because it's a third party i've installed onto my laptop so thats not the problem.
Just wondering if theres any easier way of actually creating responsive views for mobile such as using applications like Phonegap or if anyone can give me tips on how to properly create responsive content for mobile.
Thanks in advance
EDIT:
The second picture is larger because it was as a screenshot from my mobile phone, the screen sizes aren't different.
I suggest watching the New Boston's Responsive Web Design Playlist:
He will teach you the important basic concept of a responsive design using percentage and also creating your own custom menu or button in a responsive mobile version(that makes it almost like a mobile app in a browser).
https://www.youtube.com/watch?v=yWgl3xXVlHI&list=PL6gx4Cwl9DGBaTsb1nse1UU48d_q7glGT
You should consider using bootstrap. It is a mobile first front-end framework for faster and easier web development
http://getbootstrap.com
#John Appleseed
use the Inspector
"Toggle device mode" or "Ctrl + Shift + M"
time you try your web site
and not just resize the page
I don't know your CSS but have a look at this
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I am developing website to responsive for mobile and tables devices. i was using Chrome Console to debug and re-size screen to make responsive design.What i have done. my design working on the console view(Chrome Mobile devices test) but when i run to actual device on ipad mini 4 what i get response.
it's looking like scale problem. i am using mata tag. here is how i am using. <meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1.0/> In above screenshot you can see the hole cover my container at left side and pretty much space at right side.I serached on it but i did not get enough acknowledge to clear the problem .Kindly help me to make my acknowledge to next level. Thanks...
I'm searching for a reason and a hint why my website (Link) is not shown correctly with responsive design (based on Twitter Bootstrap) on iPhone5 Safari Browser while it is completely working correctly on desktop using IE, Chrome or Safari. Also on HTC & Samsung Galaxy the website is working correctly.
By Googling I only could find 2 solutions which are
A) cleaning the cache of the browser and
B) using
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
Both doesn't fix the problem. Also simulating the iPhone 5 Device in Google Developer Tool shows the website correctly while in reality the page does not show the CSS design.
Here the:
False Responsive Design Screenshot
Any idea what I need to look for as I'm running out of possible ideas.
Based on the screenshot we moved away from the Iphone theory and discovered that there was simply a problem in one of the CSS files. We had a false symbol (?) in the file and this triggered that the full CSS was not loaded correctly. It seems though that all other devices were able to compensate the mistake.
Download bootstrap to your web server and include the path in the page, so don't have to rely on another source that could go down. This should fix your problem, if not, then just try Cordova. It is possible that your your phone is being blocked by the bootstrap site because the it is going over mobile network or something like that.
Source: Personal Experience
Regards,
PRO
I just want this to display the same on computers and on mobile devices, not doing any responsive design for this project.
I've gone through the CSS and commented out everything having to do with a mobile version.
However, my site is still displaying incorrectly on mobile devices. The content is showing as desired (for the most part), but the background is shrunk and narrow like it is trying to display at the mobile page-width.
I've tried multiple devices, so this is not a cache problem.
Can anyone tell me where I am going wrong?
http://www.carolinafarmstewards.org
Here's an image of what it looks like on my phone:
Try removing <meta name="viewport" content="width=device-width" /> from the head.