html - Media query not working in smartphone browser apps -
i'm working on one-page-project uses fullpage.js create scrollable, viewport-filling secions. it's pretty straight-forward, on each slide there 1 picture , text. on devices bigger viewports, want picture float left , text appear @ it's right side. smaller viewports, i've added media query makes picture fill viewport width (width:96vw
) , removed float property (float:none; clear:both;
). when test in browser on pc reducing size of browser window, works fine, if window's width reaches 800px (the condition in media query (max-width:800px)
), text jumps below picture , picture enlarges width of browser window. jsfiddle created works intended well: http://jsfiddle.net/ginsan/ehco10dh/
however, i've uploaded project website , opened on android phone, , neither firefox nor chrome app seem recognize media query. applies float instead, looks terrible in portrait orientation ... i've tried adding more style-rules in media query, none of seem recognized mobile browsers.
i've stared @ media query half hour, can't find mistake. can you? or related fullpage.js library? or else might problem? according caniuse.com, media queries supported both android apps.
i post link check out problem yourself, i'm not sure if i'm allowed to. i?
Comments
Post a Comment