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...
Related
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'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.
I'm making a prototype sight currently that is static (as in when the screen is resized smaller such as 480 pixels the sight does not responsively adjust its elements ). I actually don't want the sight to be responsive I want it to behave as apple.com does. Apples site is a large zoomed out overview of the site allowing the user to zoom in on what he/she wishes to. Whenever my sight is loaded on my iphone it is zoomed in to a tip corner of the site. When I apply zoom:.5 to the css it zooms out just as much as i would like it to in IE and chrome but does not in Firefox. Obviously that's a major problem being firefox is a very popular browser and i am having difficulties finding an alternative. If any one could offer any amount of alternatives (even using javascript) it would be much appreciated.
If I understand you correctly, you need to set the viewport meta.
Add the following to the head section of your site:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This will set the initial zoom to fit the entire page, while allowing users to zoom as they please.
this is quite easy...
just do all your code in old fashioned pixel measurements
and nothing will resize and it wont be responsive at all
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.
I'm making a responsive site with three states (full, 480px and 320px).
Scaling to device-width look good on smartphones and devices with screen smaller than 700px, which is where the first responsive mode kicks in.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
However, on the iPad i want the width to be 1200px so the page initially shows zoomed out in it's "full glory".
Is there any way to make this by client side code? I know i could fetch user agent on server side but since i am not making the back end code, i'd prefer a html/js solution.
Of course, a responsive state for iPad's would be ideal, but there's not time or money for that and the desktop site works good enough.
Don't know if it will be the solution for anyone else coming here, but what solved this to me was setting min-width to each responsive states <body>.. made the site load decent enough on the ipad..