I am having problems with media queries not loading CSS or displaying the style correctly.
What I did was create a style480.css for my iPhone and style.css for normal.
I loaded
<meta name="viewport" content="width=device-width, initial-scale=1"/>
across my site so that it would work.
I set the css on the main site to read style 480 so I could stylize for the iphone. Everything looks great on my iphone, and of course it was just a boring list on my desktop.
After I got my style480 finished, I copied/pasted the css into a
#media only screen and (max-width: 480px) {
{
body {width:100%;}
}
in my style CSS.
Sounds pretty standard.
However it is not formatting correctly on my iPhone
The top nav menu (I used html 5 <nav>) is getting pushed to the left, a few of the lists are being floated when they shouldn't be.
It is like the iphone is mixing elements from in and outside the media query.
I have even tried putting the media query on top, putting it on bottom and loading
-webkit-min-device-pixel-ratio : 1.
Same thing, it is like it is mixing the css.
I even tried loading the css files separately on the HTML... exact same thing.
The only way I can get my iphone css to load correctly is if I set it as the main css for the page. When I am loading 2 sets of css it is not working on the iphone (but it works on my laptop)
If I can find a way to view the css from the iphone I might be able to figure out what it is doing, but until them I am at a loss as to why it is not loading the CSS correctly
It is like the iphone is mixing elements from in and outside the media query.
Well, yes, that's how it works. The stuff outside the media query will be used, unless something inside the media query directly overrides it. You shouldn't pase all your code into the media query, just the stuff you want to adjust for that resolution.
A media query doesn't replace your main CSS file, it supplements it.
Related
I want to lose an element in my site that appears to a certain place while scrolling down the site. However, I only want to do this by phone. I think I can do this with the #media tag but I don't know how to look up to a certain place and then lose it is there that can help ?
You'll want to use the browser inspector and the option to resize the web browser to above and below the width of the phone size you're targeting. If you're using Google Chrome then there's a handy guide here on how to use the device mode in developer tools: https://developers.google.com/web/tools/chrome-devtools/device-mode
The other thing you'll need to do is to target the element in CSS and hide it depending on the browser size. The syntax will look something like this:
#media (max-width: 640px) {
.the-class-name-value {
display: none;
}
}
You'll need to replace the 640 part with the maximum browser size you want to target, and replace the the-class-name-value with the value of the class attribute on the actual element. Hope this helps!
Getting close to finishing this WordPress website: www.the-hind.com, which displays fine on desktop browsers, but my only issue is that on iPhone ONLY the the sidebar on the right is pushed at the bottom of the page. I tried so many things in CSS but probably have been looking at it for so long that can't see the answer.
I'm sure (wishful thinking) that the solution is something simple & obvious, for an expert like YOU.
Looking forward to any help you can offer.
Your theme is Fully responsive by definition ( http://wordpress.org/themes/blaskan ) and this is how it is supposed to work ( it will not happen only in iPhone, but eventually in any device.
If you want to change it you should change the css file :
http://the-hind.com/wp-content/themes/blaskan/framework.css?ver=3.5.1
with the relative parts of the media queries :
/** =STRUCTURE MIN: 480px ----- */
#media only screen and (min-width: 480px)
and :
/** =STRUCTURE MIN: 768px ----- */
#media only screen and (min-width: 768px)
to understand more read here and also here or search "media queries" on google ..
The "iPhone only" will be due to screen-size. There will be other devices it happens on. So the key is to edit CSS and add the various sizes. While making your changes, test on all device sizes.
Try using this online and free tool which allows input of any sizes then the testing of multiple screens at once...
Responsive Design bookmarklet by Benjamin Keen
If you want a really nice and clear tutorial try this...
Responsive Web Design by Shay Howe
I have an image gallery, the images are large enough to fill an iPhone screen.
The images are also links, so as you can imagine, scrolling becomes quite frustrating on the iPhone because you're constantly clicking links by accident.
Is there anyway to prevent this using css alone?
If not then what would be the most simple solution to this problem?
Thanks!
I would suggest to use the Javascript. However, I found a way using only CSS. First step, you will need to identify the client browser, just add the code below in your HEAD session in HTML file:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
Only if client is using a browser in iphone, the content of "iphone.css" will be loaded.
In this file "iphone.css", you need create a class to disable the links:
.disableLink {
pointer-events: none;
cursor: default;
}
In your HTML code of gallery, add the references in your links:
IMAGE
These steps works only in iPhone/iPod touch, but if you look in my second reference, you will see the way to adapt for iPhone 4/iPod touch 4G:
I don’t think there’s a CSS-based solution (CSS isn’t really designed to change the behaviour of HTML elements).
You could use JavaScript on page load to check the width of the browser’s viewport, and then find and disable/remove the links if the viewport is phone-sized.
See PPK’s ‘A Tale of Two Viewports’ article to figure out which JavaScript properties to check to figure out the width in your situation (I haven’t done enough mobile development to remember off the top of my head).
I like the idea of pointer-events: none;, but I wouldn't use it because it isn't well-supported.
If we're defining a mobile device as just having a certain screen size, I would do something like this:
$(function () {
var mobile = ($(window).width() < 481);
$('#image-gallery').find('a').click(function (e) {
if (mobile)
e.preventDefault();
});
});
However, I would try to define 'mobile' as something else, e.g., a browser that supports touch events.
Trying to write html help files that get included with our app on iOS.
For the iPad version, I want the help files to display a smallish graphic (about
156x204).
For iPhone / iPod, I don't want to have the graphic displayed.
Other than using javascript like the following in the file h_login.html:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("h_small_login.html");
which requires a clone of each file, I haven't found a method.
Would prefer to stay using minimal HTML ... vanilla, no CSS, a single "meta" at the
start to specify:
meta name="viewport" content="width=device-width; initial-scale=1.5; maximum-scale=4.0; user-scalable=1;"
thanks!
Stan
By far the easiest way is with a media query. I'm fairly sure i-Devices support this feature of CSS:
#media screen and (max-device-width: 600px) {
img.hide {display:none;}
}
Just add class="hide" to the relevant images, and adjust the 600px (I don't know what the resolution of iPhone and iPad are, but just change the 600 to anything in between the two).
It is far easier to do this than to try and get JavaScript to do the same thing.
jQuery can do this easily:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("img").attr("display","none");
}
That would remove all images from the document when the useragent is iPhone or iPod. If you aren't using jQuery, but you are using server-side scripting, we'd need to know what language you are using. If you are just using straight HTML, then JavaScript is your only way to modify the page, and jQuery will be your best bet.
On the iPhone I'm using a UIWebView to display some content that is stored on the device so my content can be viewed on the device when there is no internet connection. I'm using the jQuery and mobile stuff in an attempt to create web apps and mobile apps that use one code base.
When I include:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
everything works fine, the sprites that make up the back button, home icon etc. all work fine. When I include the above as a local resource such as:
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
The sprites do not display, I just get a dark circle where the sprite should appear. All the other attributes defined in the css work fine, just not the sprites. If I misname the local resource, everything is messed up, so I know the css as a local resource is being included, but it is being handled differently as a local resource vs a remote resource. It even works if I hit the local dev box running apache... so it must have something to do with how the web server is serving the page vs. including it as a file......
I played around with loading the same page twice with separate UIWebViews in an attempt to see if there is some timing issue... since a local resource would load much quicker than a remote resource. The second instance of the UIWebView loaded it correctly. Is there a $.mobile command I can call to refresh the page, or for the library to do it's magic?
any ideas?
thanks for any help
Question was answered in the jQuery forum. Funny, the answer was related to my comments above, and I still didn't think to look at the image files! palm2forehead
had to go in the jquery mobile css file and remove the references to the "images" directory. IOS doesn't handle directories like normal systems so once I did that all was ok.
It did not solve my issue chaning the path.
I had to look up in the mobile.css, i found that the icon were first set with an image, an then moved with classes, i had to set the the full background property on the classes that moved the background image.
Like so:
.ui-icon-plus {
background:#9c9c9c url(icons-18-white.png) no-repeat 0 50%; }
Old way were:
.ui-icon-plus {
background-position:-0 50%;}
Put everything (js,css) to www folder along with index.html file, and include file like this <script src="jquery-mobile-min.js">`, it has solved my problem.