i'm using basic method of "mobilizing" desktop site using different style sheets. @ top of every page of site, have this:
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://scoresquare.net/css/screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://scoresquare.net/css/mobile.css" type="text/css" media="handheld" />
whenever user logs site smartphone, goes home page [index.php] has abovementioned code @ top. there 8 buttons on home page, , whichever choice user makes, site displays mobile version on smartphone.
however, whenever user decides return home page via button on other page, index.php displays in desktop version on smartphone. in other words, index.php displays first time on smartphone, not second (and every subsequent) time.
if user hits button on smartphone browser home page, index.php displays proper mobile format.
fwiw, each home page button involves program querying sql database , returning data (which works fine). somehow reset style sheet functionality?
if matters, mymobile.css looks this:
/* mobile styles */ @media handheld { html, body { font: 12px/15px sans-serif; background: #fff; padding: 3px; color: #000; margin: 0; } #sidebar, #footer { display: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } #content img { max-width: 250px; } .center { width: 100% !important; text-align: center; } a:link, a:visited { text-decoration: underline; color: #0000cc; } a:hover, a:active { text-decoration: underline; color: #660066; } } /* ipad [portrait + landscape] */ @media screen , (min-device-width: 768px) , (max-device-width: 1024px) { .selector-01 { margin: 10px; } .selector-02 { margin: 10px; } .selector-03 { margin: 10px; } } /* iphone [portrait + landscape] */ @media screen , (max-device-width: 480px) { .selector-01 { margin: 10px; } .selector-02 { margin: 10px; } .selector-03 { margin: 10px; } } any idea might causing this?
strange works on first load!
the valid media types "all," "print," "screen," , "speech." in current practice, "screen" considered equivalent "all", , type left out (leaving media type specification cases of print-only , screen reader-only styles).
media queries in linked stylesheet like
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> (that copied write-up of how use media queries)
in case, final markup similar to
<link rel="stylesheet" href="http://scoresquare.net/css/screen.css" type="text/css" /> <link rel="stylesheet" href="http://scoresquare.net/css/mobile.css" type="text/css" media="(max-width: 400px)" /> (i don't know width you're using "handheld" breakpoint, used 400px. css-tricks' media queries standard devices 1 reference max-width mobile break points… it's rare you'd bother targeting specific device, example shows breakpoint @ 800px catch popular tablets)
Comments
Post a Comment