Tips on making responsive website fit for mobile - html

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

Related

Bootstrap 4 website gets auto zoomed in mobile browser

I am working on a website built-up using bootstrap 4. Website design is working perfect on all platform but on mobile devices the website gets auto-zoom. i need to zoom-out manually in mobile devices to see the website properly. I have tried media port commands, initial scale to 1. Still not getting a solution. Please help

Using media queries to optimise mobile web experience

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.

How to add more than one conditional in a javascript if statement

I have built a website, and it works fine when viewed on a computer in all browsers. But when I try to view it on my phone, it looks terrible. The header is normal size on the top, but all the page text is aligned on the far left of the screen, with a new line every three words. The structure of my website is that I have a div in the middle with all the content, with a 300px margin on each side. Why would this happen? How do I fix it?
What you are referring to is termed as a Responsive Design.
What is Responsive Web Design?
Responsive web design is to create web sites that look good on all devices.
Responsive web design is not a program or a JavaScript. Responsive web design is a must for mobile devices.
Quoting from a tutorial, here are 3 easy steps for responsive design:
Step 1. Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Step 2. HTML Structure
Step 3. Media Queries
Here's a Demo, and here the source of the demo.
seems to me that you have a responsive design issue.. Look up media Queries. Add them to your site and configure your elements. Try working more with % and em.
An often used framework to create responsive websites is Bootstrap.

How You Style Website that was built for Mobile Devices?

Ok, now most mordern smartphone has 720p or 1080p resolution. That mean even screen size is small like 4 in, we still can see all text, gui (such as email textbox) of the whole website when first time opening it in Galaxy s3.
However, though we can see the very little email textbox in mobile browser, it is too small for us to enter data. So we need to magnify the page and that is very time consuming.
So, here is what i am planning to do but i feel it very strange.
I will create a website like a normal website mydomain.com, but the button and text on that website is very big.
Ex:
Css
.myNormalMobileFont{
font-size: 500%;
}
.myNormalLargeFont{
font-size: 700%;
}
The below image shows that no matter where I open my website either in mobile device or in desktop, then it will look like this
One more thing, when I opened some article page in my mobile I saw they have a mobile web version, but I have never found these mobile version on the normal Desktop browser?
Where they put their mobile web?
My mobile website can be used as a normal Desktop website but the the buttons and Text will be very big.
Can someone explain this?
You actually don't need to specify the font-size like that as long as you set the correct meta tags.
ex:
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
This sets the scale of the viewport.
I suggest you upload your HTMLs to a server and access them from your phone and play around with it there. it's the best way to learn
As for your question regarding where you can find the mobile web, it depends on the site.
1) Sometimes the site is responsive (you can access the site from desktop , resize your browser down and watch it change) ie: https://www.foxtel.com.au/got/login.html
2) But sometimes they have dedicated mobile site, like facebook -> https://m.facebook.com/

Make a website layout and content fix with any size of our monitor

How to make a website layout and website content fix when the size of our monitor changes???Just like from 15" monitor change to 21" monitor...all of the content in website doesn't change.
Sometimes when we see our website in another laptop with different monitor size, the content of the website fall apart.
I make an application in which I use div tag but one problem is that in other or big resolution monitors it shows different view and some other monitors show another view of my Website. So how can I fix the view for all the monitor resolution.
I think media queries sound like they could be your saviour. You can use them to create a responsive site - from mobile to tablet to desktop etc. With media queries you can target different resolutions and fix/sort/adapt your design using CSS to make the best viewing experience for the user. This approach would be called Responsive Web Design, which is quite the buzzword(s) at the moment.
Some quick links for info:
Link 1
Link 2
If you feel like buying a book/e-book, I would recommend:
Responsive Web Design
Well come to the world of responsive web design, Your perfect solution lies in here
You need to explore Media Queries, Responsive Images as well.