It seems everything I add as meta to work for mobile version of the site , it is actually ignored and is full-zoomed ( when I visit my site on a mobile ) to the actual size of what I have in CSS.
> I tried :
> <meta name="viewport" content="width=device-width,> initial-scale=1, maximum-scale=1"> &
> <meta name="viewport"> content="width=device-width">
As a matter of fact, I completely took off that line in hope it will not scale, but it still zoom-in !
The header, seems to be ok, and is scaling good on mobile , but everything else, is zoomed-in .
Exemple : thumb is 728x410 in css , yet , with or without the mobile meta viewport , it still have the same size on mobile which makes it huge!
Also, when the website is loading on mobile, the actual meta=viewport works , meaning if I have set to have a 320 px on mobile, the thumbs does show as it should , but when website is fully loaded, bum .. back to 728px which i have in css!
Anyone knows how to fix this? Thanks!
Having built many responsive websites, I have to state that if you have content wider than the mobile screen (in this case 320px, Iphone only?), it will mess everything up.
To solve this, make sure you have a few main wrappers around your content like a header, content and footer div.
Give these divs the following css rules when on mobile:
@media screen and (max-device-width: 480px) {
.header,.content,.footer{
display:block;
position: relative /*for absolute positioning or to get them behind
pop-ups with z-index
this also prevents absolute-position elements being outside
the parent element from stretching the view*/
width:100%;
overflow:hidden;
}
}
The above should prevent anything from messing up your scaling. From there, you can see which elements don't fit and style them accordingly.
Also, if you want to disallow zooming, you have to put in user-scalable=0, like so:
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0' name='viewport' />
Make sure your content actually scales down to your phone's screen size. It will make a major difference. I would also personally recommend you to get used to using box-sizing:border-box;. This means adding any padding or borders to any elements be taken off the element rather than being added to the element.
example: Your screen is 320px wide. You have a <div width="320"></div>, it will be 320px wide. Adding padding:20px to it, will make it 360px wide (20px padding to both sides)
However, using box-sizing:border-box will make sure it stays at 320px (same with 100% width) and instead, the content will be fit within the leftover 280px. Just a tip.
also: What kind of media queries are you using in your CSS file?
Update specifically for your website I got it to be like this: --img removed for privacy reasons --
These are the css changes I've made including adding the meta tag in my answer to your head, replacing yours:
#headerContent {
width: 100%;
height: 40px;
margin: 0 auto;
}
#mainContainer {
width: 100%;
margin: 0 auto;
}
.videoListItem .thumb img {
position: absolute;
width: 100%!important;
overflow: hidden;
top: -68px;
left: 0;
}
#leftColumn {
float: left;
width: 100%;
}
.videoListItem .thumb .playIcon {
background: url(./images/play_icon.png) no-repeat 0 0;
top: 50%;
left: 50%;
width: 86px;
height: 60px;
position: absolute;
margin-top: -30px;
margin-left: -43px;
}