I'm using media queries.
my code is not working for following resolution.
240 x 320 (small phone)
320 x 480 (iPhone)
I want to add this
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
What about meta tag? (I'm using this <meta name="viewport" content="initial-scale=1.0, width=device-width"/>)
my code is not working for following resolution.
You need to read more about creating a mobile websites
You need to read this:
To answer your question regarding about this:
240 x 320 (small phone)
320 x 480 (iPhone)
You need to add this
/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
}
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
}
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
}
You need to play around with the style it to get it right resolution for your website (it's base on the website design and it varies for each website but in the end you need to make adjustment in @media query. The reason why it is like this because it's an outline design for each device.
Regarding about the meta-tags you can read that from the link to get an idea.
I wouldn't worry about that for now until you fixed resolution.
max-device-width is not working for me but max-width works well.
any problem on client side when uploaded to server?
max-device-width is not working for me but max-width works well.
how do you link your css file?
it should look like this:
<link href="css/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />
the phone.css should have this:
/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
}
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
}
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
}
Do you understand how this works now?
You need to play around with the style to get the right resolution for your website meaning this:
#wrapper { width: 100%;}
#column1 { width: 100%;}
#column2 { width: 100%;}
Like I mention before it's varies on designs so you need to adjust the style to make your website looks right.
What I just posted is just an outline of 1 mobile device I used so it really depends on your design.
Thanks
It's working
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.