Hi Guys (& Girls of course)
I'm having a major problem with webkit and media queries. Basically they are only kicking in around 15-30px after they should.
When I load the page with Javascript enabled I can see from the console the correct device width and this corresponds with the array of extensions that I've thrown at it.
When I disable javascript I get the same result so obviously it isn't my javascript or any plugins that are throwing things out.
In the dev tools I can watch the inspector tab and the relevant media queries don't kick in until after they are supposed to and you can see the the resolution they have kicked in don't match the media queries themselves.
Any help would be much appreciated on this one as I'm now not really able to come up with any other suggestions.
If there is any information that I can give you that will help you to help me please let me know (I'm restricted in what screenshots I can provide due to non-disclosure).
Thanks in advance & here's hoping :-)
John
After sharing my question on Twitter I was sent this link which has fixes
http://mattstow.com/your-media-queries-are-wrong-fix-them-with-viewport-genie-and-mqgenie.html
It basically says that webkit doesn't take into account the scrollbars when applying media queries and that would (to me) explain the correct space that the media queries are off by. I hope that others find this answer useful as I couldn't find any information by searching Google. Obviously now that I am able to narrow down the search I would probably be able to to find the answer on there.
Check the difference between the browser width and the viewport width. It's the latter you want to design for with mobiles, tablets etc.
The scrollbar is the cause of this, the calculated width from js and the width you define in media query are not the same due to scrollbar (I think in some browsers they are the same but not all).
You need to sync the width so that js and media query is the same. If you want to go with media query width then you probably need an element to check for that changes with the css. If you wanna go with js width then you can easily add a class to the body and target your media query with that class. I am sure there are other ways of syncing as well.
Related
Using the Google Chrome browser, what is the easiest way to determine the page size, so you can write an appropriate css3 media query.
Currently I slowly resize the browser to spot any areas where a css3 media query could be used to improve the increasingly squashed interface but need a way to know the size the query should be used for.
Ahh I found a good way. In the Google Chrome inspector go to the console tab and enter the following:
document.body.offsetWidth
This will print out the current page width :)
So I've done a fair bit of reading on media queries and I get why for most situations just specifying a dimension and going after a device might be useful... But what if you're just looking for whether the device is portrait or landscape?
What I really want is to be able to check if the screen whether the width or height is longest, and then run different CSS depending on the answer. Ideally I want to be able to do this all inline rather than running different external stylesheets.
Any help much appreciated.
As Ryan and Cimmanon said, yes, it can be done. Media queries have a nifty little option called orientation, which you can set to "portrait" or "landscape".
Do keep in mind, though, that not all devices/browsers support some or any media queries, so make sure you have some default styles set up for those that would ignore your styles otherwise.
I am working on two different responsive websites (both work in progress and one is taken from lynda.com just for practice). This first one I did works fine as far as I can tell.
The HTML is HERE and CSS is HERE.
Then I started to work on this one, created the same css as above but the media query targeting #media only screen and (max-width: 768px) is not loading for some reason.
HTML is HERE and CSS is HERE.
I've spent hours trying to figure out why and I'm lost. I don't any differences between the two, yet one is working and one isn't. Any suggestions you have would be much appreciated!
I'm just testing them in a browser right now.
Thank You!
I think the issue is one site has a "meta...viewport..." in its HTML, while in the other site that statement is commented out.
In the site with no "meta...viewport..." the Media Queries are actually testing against the dimensions of the unconstrained "viewport" rather than the "screen" (an oversimplification is "devices sometimes lie"). On the other hand in the site with "meta...viewport...width=device-width" the "viewport" width is forced down to be the same as the "screen" width before the Media Queries test it, so you get different answers (especially on smaller devices).
(Depending on what devices you're targeting, you may need to dive down into thoroughly understanding a "viewport". There are good reasons for the way a "viewport" behaves; please don't misinterpret my sarcastic "devices sometimes lie" to mean "viewports are a bad idea".)
Can somebody please tell me the best way to deal with different window sizes and with a user resizing the window when creating a webpage.
Because I always find myself creating layouts with html, css, etc. and at first everything look perfect. But as soon as I increase or decrease the size of the browser window everything falls apart.
Also it would be great if anybody could point me to some sort of guide or anything similar.
Thanks it advance! Any help is greatly appreciated!
For detection, you may want to use css media queries (in which case you may want to to use https://github.com/scottjehl/Respond Respond.js's shim for older browsers, to add fuller cross browser support), and target certain screen widths. http://html5boilerplate.com and it's default css: http://html5boilerplate.com/css/style.css has a great default css set for exactly that type of media query.
Another approach is to give a fixed minimum and maximum widths to the outer container of the page. For example:
body{text-align:center;}
#outer-container{text-align:left;margin:0 auto 0; width:98%;max-width:900px;min-width:760px;}
that way you can grow and shrink it and see how it looks within a certain range and know that other viewing windows are going to see that plus a horizontal scroll bar at worst for small viewing.
In general, just using the html5boilerplate as a starting base is a great approach, it's an excellent piece of work.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.