I want to accomplish something, and for that I need to know if the browser care about the meta viewport.
For example, chrome for iOS will be adjusted by the content of viewport. But chrome for windows won't.
What would be the best way to know if a browser uses the viewport content?
It looks like setting the viewport tag is up for a bit of debate. It sounds like your question might warrant ("Some visitors in my site don't care about responsive design") looking into the afore-tagged HTMLBOY blogpost; however, if you continue to use it, there are a few things to be aware of (the first, second, and third really being the take away points):
The website, itself, must be responsive - not just the browser, i.e. <meta... content="width=device-width"> won't do anything unless your website knows how to scale
It is true that the viewport tag is not currently a part of any web standard and was originally Apple-proprietary (this is the root, perhaps, of your problem). Not all browsers support it.
A pixel is not a pixel, i.e. a CSS pixel is not a physical pixel - the two are not tied together (this means that configuration attributes on the <meta> tag when related to the viewport can become problematic (particularly considering point no. 2, above, and elucidated in the linked MDN article in the same point). For further reading about the complications, you can read here and here
(helpful tip) If content on the website is important, don't set the maximum-scale or the user-scalable=no attributes. This will stop the user from examining important text more closely.
Now that all that is out of the way...
The answer to your question, "What would be the best way to know if a browser uses the viewport content?", is that there really is no great way to do it.
However, we do have two properties that can help us using in-line JavaScript that relate to the two concepts of the "visual viewport" (smaller) and the "layout viewport" (wider) thanks to the incompatibility between browsers "back in the day".
The visual viewport is the part the users sees on his or her screen - the part currently seen. This is what is scrolled when examining content larger than the device screen.
Everything related to CSS is calculated in relation to the layout viewport. As the linked article states, "How wide is the layout viewport? That differs from browser to browser."
Thus the element takes the width of the layout viewport
initially, and your CSS is interpreted as if the screen were
significantly wider than the phone screen. This makes sure that your
site’s layout behaves as it does on a desktop browser.
So, how can we leverage this to our advantage?
We can't detect if the browser supports the tag; however, we can detect if the browser has applied it. I'm not going to re-invent the wheel, so I'll link you to this SO answer and then an article which (already linked above) delves deeply into the topic. This knowledge should point you in the right direction.
Related
I am running into some issues determining the type of browser using Javascript. My current method is to capture the screen width and height and determine the type of browser based on pixel sizes.
I figured I could assume that any screen width under 768 would be mobile, anything under 1024 tablet, and anything above that a desktop.
I've started testing on a few devices I can actually get my hands on and the results are much different. For instance on an android (Droid Bionic to be exact though it doesn't matter much) its returning a width of 980 regardless if the device is in landscape or portrait mode. This is much higher than I assumed.
Currently I am using document.documentElement.clientWidth to determine the width but I have tried other approaches such as window.innerWidth as well.
I guess what I am trying to get at is a question that has been asked many of times and I thought I had a pretty clear answer to. Apparently it might be time for a refresh on proper browser/device detection. So what is the most effective way to determine the actual size of the device I am on?
UPDATE:
It seems as if mobile browsers are actually taking it upon themselves to decide how to display my application. And in fact they are, but there is a way to stop it. See answer. Fortunately this means that the standard feature detection methods we are used to are still the best way to determine the device you are using.
Per Dagg Nabbit's comment on the question:
It seems that mobile browsers take it upon themselves to determine the way a site is displayed. This typically means taking a desktop version of a website and zooming out to fit the contents on the screen. For 90% of the internet this is necessary otherwise the mobile browsing experience would be horrifying. For responsive websites this is no good because in most cases we have very specific elements that must be altered depending on the resolution of the device the site is being viewed on. So how do we stop the browsers from doing this?
By using a viewport meta tag. The standard tag looks something like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But there are a lot of different ways you can customize this to suit your needs. A good reference is https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
I'm trying to use Crocodoc to view documents on my site. The documents look good on desktop but their scaling algorithm is too severe leading to the font-size being too small on mobile. As an example, see this link and re-size the browser or check on your phone: https://crocodoc.com/view/92GF0fI39qf4YlCK18njk7LOaz6qtCuVVFQU5T1TbK-HARw_oJutfq7clutH5rYCEoV85rk9a05kdE-du4A9LdEaNIW0cORvFuQHlQ
update to include permanent link since session links expire after an hour:https://crocodoc.com/see-it-in-action/
The font-size goes from ~10em to ~3em as you shrink from ~960px width to ~320px width. 3em is too small to view on any device without zooming in which is annoying because then the document doesn't fit on the screen.
I'm not seeing a simple fix and am wondering if anyone hacked around with Crocodoc to know how to deal with this UX issue?
I think there is a slight misunderstanding here. Crocodoc does not scale text based on the size of the display. Rather, when a document is first viewed an effort is made to scale the entire page/document to optimally appear on the screen. Crocodoc documents are meant to be pixel-perfect renderings of the original document, rather than reflowed text like you would see with an e-reader. When you zoom in and out the scale of the entire document will change accordingly, just as it would in Preview, etc. Does that clear things up?
By the way, your link will no longer work since document viewing sessions expire after 1 hour.
How can I make my scroll bar black for a <div>?
Is there anything that will work in Webkit, IE7 to IE9 and Firefox?
You cannot do this in Firefox. Only IE and webkit browsers support modifying the scrollbar.
See http://msdn.microsoft.com/en-us/library/ie/ms531153%28v=vs.85%29.aspx on how to do it in MSIE and http://www.webkit.org/blog/363/styling-scrollbars/ on how to do it in webkit.
You cannot style the scrollbar of the browser. It's not universally supported (although IE did try to implement it).
Also, it's a bad idea to do so from an accessibility perspective. Think of (old) people who cannot see your very slim, almost invisible custom scroll bar or don't know that what you have there is actually a scroll bar.
You can use custom scrollbar plugins in JS like this one. It's all over the place
As Pez Cuckow said:
I imagine that custom scrollbar is implemented in javascript, it looks
very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at:
http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this
includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly
what you want) with Javascript and jQuery:
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at
http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
I agree you shouldn't tamper with the visibility (I'm looking at you Apple) of the scrollbar of a scrollable region. Sometimes, a box with scrollable text fits just inside the boundaries and there is no visual clue letting a user know that it scrolls thereby confusing the user. Is it really a good idea to prevent the user from being able to use your application? Most likely not, but you can also argue back that your target demographic wont have any problems; an application for extreme inline competition is probably not going to be used by people who aren't able to see very well. However there are accessibility/usability concerns that go beyond visual hinderances; cognitively impaired, or non tech-savvy, individuals might be very good at said aggressive inline and want to compete in your upcoming event but wont be able to because the black-on-black scrollbar looks awesome.
That all said, do what make you happy. That's what I do.
I am using text-shadow for all p and headline tags (2px white glow for better readability), everything works fine until page is scrolled and javascript changes absolute positioning on one element to fixed - which I want to stay visible.
Is there any way apart of changing style for opera to make it scrolled smoothly? overflow:auto is not working in this case...
Thanks
it's hard to say 100% without seeing the code, but I guess that the way you've styled this page makes Opera do a lot of reflowing and painting when it is scrolled, and the combination of styles will make this a very expensive operation. (It would be nice to see a jsfiddle or get a link to the actual page, this would also make it simpler to advice on possible workarounds).
There are various fixes you could try - like keeping the element you want on-screen styled with position:absolute and move it from JavaScript after scroll events, or simply avoid setting position:fixed in Opera and letting the element scroll away for better scroll performance.
However, I'd strongly recommend that you first report a bug to Opera. Why?
The reason and the genesis of the web is collaboration. It may not be obvious to (understandably) frustrated web developers struggling with browser bugs, but they have a responsibility for helping browser vendors improve when they find problems, thereby contributing to moving the web forward. A minority browser like Opera admittedly has less development and QA staff resources, but to some extent support from the user community and "normal" web developers makes up for this and makes it possible also for smaller players to develop in the Web ecosystem. I think that's one of the web's strengths and the real reason why no single corporation has been able to dominate it.
So please report your issues and problems :)
This is a problem with Opera, not any way you've written the code. Opera is a gigantic steaming pile of doo-doo with almost no market share, and you should use another browser.
That's basically all anyone could tell you here, unfortunately. I understand that everyone loves their browser of choice but some just don't handle these things well. Other examples: browser with a poor javascript engine rendering animations erratically and jerky, etc.
I have a legacy web application that was written long before there were even mobile browsers, never mind responsive design. As such, everything is static.
I can't modify all aspects of the site's pages. For example, I cannot change that the main container is set to 900px with auto margins. But through other server-side output classes, I can modify bits here and there. For example, one class builds a <div> element with other nested markup, and I can add inline styles and attributes to any of this markup. I can also modify the header include to a certain degree. So what I'm wondering about options:
Right now, the whole page fits in the mobile viewport, making text tiny. Can I instead zoom in for mobile? I don't mind if you can't see all the content but at least fonts are at a readable size. Is there some CSS or a meta tag that I can use to zoom by default? (desktop browsers must remain the same as they have always been, though)
If I have an iframe within a page that is, say, 320px wide, is there a way that will allow me to automagically focus of that iframe on page load so that it fills the width of my mobile viewport?
plain JavaScript is an option (no external libraries like jQuery); if this can't be done with a tag or with styles, is there a JavaScript method I could employ?
I apologize for lack of sample code... I've certainly tried a few different things with CSS properties, but no matter what I'm always viewing the zoomed out full-page version.
To make sure your fonts are readable you could use a font-size per percentages instead of pixels if thats what you are using.
View this article about adaptive design for mobile if this helps :
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries