I have an iPhone 4. I know the resolution falls within the parameters of my styles. Yet I'm seeing my full-width layout on my smartphone.
Can I get a pair of fresh eyes to view source and let me know if I'm missing something obvious? It shows up in my browser but not on a device.
http://georgiaderm.com/mobile/
In my HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
In my CSS:
/* ---------------------------------------------------------------------- */
/* Media Queries
/* ---------------------------------------------------------------------- */
//* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width:1000px) {
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width:768px) and (max-width:1000px) {
body {padding:10px 4px; width:760px;}
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width:768px) {
html {background:#fff; padding:10px;}
body {box-shadow:none; margin:0; padding:0; width:auto;}
body > nav {display:none;}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width:480px) and (max-width:768px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width:480px) {
.alpha, .omega {float:none;}
.alpha > * {margin:10px auto;}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width:320px) {
footer div {float:none; width:auto;}
}
edit: Simplified it.
While I'm here, anyone have a lightweight strategy for deactivating JS tabs on small devices?
I specifically define 0px on my media queries, for example:
#media only screen and (min-width:0px) and (max-width:1000px)
{
/* STYLES GO HERE */
}
Perhaps that will help?
Okay, while I didn't solve this mystery, I moved the mobile styles to the rest of the site and they suddenly worked. I guess I had something quirky going on with my CSS specificity on the mobile.css but once I moved the media queries over to my main.css, all is well.
Thanks for the help, all.
Related
I am developing an android app using JQM and PhoneGap . The app appears good in low end devices but the letters appear extremely small on high end tablets.I have tried modifying the viewport tag after browsing through so many sites.It would be very helpful if someone could give a resolution so that I can concentrate on functionality rather than the layout and resolution.
Use CSS media queries to configure font styles based on device resolution.
Example:
#media screen and (max-width:600px) and (max-height:963px) {
.fontClass {
font-size: 38px;
}
}
#media screen and (max-width:320px) and (max-height:568px) {
.fontClass {
font-size: 28px;
}
}
I have a webpage whose width is over 1000px wide. There is a background DIV element that spans across the entire width
.bg_horizon {
position:absolute;
width:100%;
height:800px;
background-color:#f7f7f7;
border-bottom:1px solid #8d9092;
z-index:-9999;
margin:0;
padding:0;
}
This box renders fine in landscape orientation and on desktops, but on ipad portrait mode the webpage is wider than the viewport... this is fine, as the user can just pan around, we don't allow scaling... but the background div only rendered the css width:100% up to the visible portion of the viewport. When I pan around, I can see the rest of the webpage but the div did not extend into those areas. How can I get width:100% to span across the entire webpage?
iPad screen width is 1024px so try adding:
html {
min-width: 1024px;
}
I have used a fixed footer in one my HTML5 web-app. It works fine on IE10 phone browser, but when I try it out on WP8 Emulator using web-view
mainBrowser.Navigate(new URi("http://jqtouch.rediffmailpro.com/iScroll/win8Example1.html",URiKind.Absolute));
It leaves a gap at the bottom.
I read it somewhere, and edited the meta tag to include the height.
<meta name="viewport" content="width=device-width, height=541 initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
The gap is gone. But, I don't think this will a good idea because on orientation change the footer is lost, as height remains 541. I don't want to hard-code the height anywhere, since multiple devices might have different height.
It seems the view-port height is not correctly set for css. I am using bottom:0; position:absolute; to fix the footer. I have tried position:fixed too.
Here is the reference link: WP8 Scroll Demo
Please help.
Use iscroll4 and use few media queries in css:
#media screen and (orientation: portrait) {
#-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
#media screen and (orientation: landscape) {
#-ms-viewport {
width: 480px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
This works fine on Windows Mobile 8 Phones. Here is a demo: http://jqtouch.rediffmailpro.com/iScroll/win8Example.html
My jquery mobile page is WAY to zoomed out. I have tried everything I can think of, but I cant get it to zoom in.
This is the last thing I have been trying:
.ui-mobile-viewport {
max-height: 440px !important;
max-width: 500px;
}
How do you zoom in a page? I just want the page to fit normally on the phone
I believe you are looking for the viewport meta tag: http://davidbcalhoun.com/2010/viewport-metatag
EDIT:
Perhaps I don't fully understand the problem, but maybe you could try to fix it within the following CSS #media queries:
#media all and (orientation:portrait) {
/* set some widths maybe? */
}
#media all and (orientation:landscape) {
/* second verse same as the first */
}
Finally, if I'm still off base, do the answers here help? How to set viewport meta for iPhone that handles rotation properly?
I'm building an iPad magazine for a University project in the form of a web site to demonstrate some of the functionality of my proposed design (the real-life app would of course be native iOS)
I have looked at some frameworks like Sencha which seems overkill for what I want and seems to want to do everything inside JavaScript instead of keeping it to HTML/CSS and then adding the interactions on top. I have also looked at jQuery UI iPad which seems the most promising but I could do with some help getting it to work. Here is a demo of it working: http://jsfiddle.net/blackdynamo/yxhzU/
Here is a sample page for my pages: http://driz.co.uk/ipad/
What I need help with is getting the DIVS to sit next to each other in rows and then add the interaction whereby as a user swipes left, right and up and down it will jump between the different DIVS as though they are pages/sections of a magazine.
Here is a image that shows how the DIVS would ideally be arranged, so a user could move between the sections going left and right and then scroll inside that section by scrolling up and down. http://driz.co.uk/ipad/plan.png
Can anyone help me get this working? THANKS LOADS!
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
I am not entirely sure with the divs, sorry. Hope this helps.