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 :)
Related
Not sure how many people use it, but I noticed the only (free) choice for me to use videos from Azure Media Service is to use their own player. (and welcome suggestions for other players that works in variety of browsers)
However, I noticed some issues:
Following their examples (https://amp.azure.net/libs/amp/latest/docs/Samples.html, tried both JS and HTML5 versions), I noticed the page always show the ugly play button overlay -- Any way we can hide this play button or make it look better?
Also, looks like the video always default to 300x150px, even if I set the size for the Video tag. Any way I can make the video fit the width of its parent and resize when its parent resizes? (assuming we only have 16:9 videos, hopefully without using JS)
Thanks!
You can use just about any video player to play video from Azure Media Services. For example, I use VideoJS for my projects.
You simply change the src on the video player that you are using and have it point towards your videos stored in Azure. I wrote an in-depth series about the video player and how AMS works.
In terms of overriding their code, sure, you can apply different styles to the media player. In the debugger, check out which styles are currently applied to that class / ID, and make changes with your own CSS.
The JS will be obfuscated, however. Hopefully this helps!
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.
I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.
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.
If we have hidden some stuff using display:none; for example: images , will it still be downloaded by rendering engine? If yes, does that mean while opening the same web page in mobile, it's going to be unnecessary extra weight to download?
This can further mean that modifying the same webpage for mobile can be a bad idea. Please advice. Thanks.
Yes, the entire page is downloaded (hidden elements and all). The display:none is meaningless until the page has been processed by the browser's CSS Engine.
There are several ways to stop an image being downloaded, wether the image is inline or is a background image within a CSS style, or wether it is being brought in through a media query. It works for nearly all mobile devices (except 'Fennec 10.0+' being the only device that still downloaded the image.- see Tim Kadle's test results)
Tim Kadlec's 'Media Query & Asset Downloading Test Results' research at:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
It says, for a background image, hide the parent element. If you can’t do that, then use a media query to set the background-image to only download when screen or device size is at certain size. Just define what you want hidden / to not download by putting inside media queries. Isn't it marvellous.
Also another brilliant test to use, so simple, at:
http://timkadlec.com/mq/test4.php
On this test you just resize your browser window to mimic wether 'desktop' or 'mobile' to see wether it is downloading images related to the media queries. You simply click the links for each scenario you want to test.