Can please somebody tell at what screen size will mobile-detect npm package report tablet, mobile. For example, if width is below 320px it's mobile. I cannot find this information.
Thank you
From mobile-detect's documentation, it looks like it is focused on device detection, so it allows you to target specific devices.
If you want to detect pixel width for styling purposes, then you can simply use CSS media queries.
If you need to do programmatic things as opposed to just styles, then you can use javascript's native window.innerWidth method, or use jQuery for window.width and window.resize methods (for screen rotation, etc).
Hope this helps.
Related
I don't know if I'm misunderstanding something fundamental in how screen resolutions work, but I'm getting stuck on an issue with the Kindle Fire HD (7").
I have a responsively designed page that, as normal, uses CSS media queries to change the presentation of certain elements. This works as expected on all browsers and devices tested, except for when browsing with the Kindle Fire HD (7"). According to specs (http://en.wikipedia.org/wiki/Kindle_Fire_HD) it has a screen resolution of 1280 x 800 px. This is also verified when I check the device using WURFL's test tool at tools.scientiamobile.com.
So... I have breakpoint screen widths set for
'mobile' - 767px and below
'tablet' - 768 - 989 px
'desktop' - 990px and above
... so I'd expect the Kindle Fire to display my page in 'tablet' mode in portrait orientation, or 'desktop' mode in landscape. However instead it shows it in unexpectedly smaller breakpoints: 'mobile' mode in portrait, and 'tablet' mode in landscape.
On closer inspection, I'm not sure this is actually much to do with my webpage, or its CSS. When using this device, I also seem to be seeing 'smaller' breakpoint views of other RWD sites (e.g. in portrait mode, I get the 'tiny' breakpoint view of getbootstrap.com, which is aimed at 767px and below).
What's then strange is that, when detecting the screen size using JavaScript, I get 534 x 854px (and have also tested this again on other sites, like supportdetails.com, and got the same results).
I haven't found any similar issues reported re this device, so I'm wondering a) if anyone's encountered similar issues, or b) if I'm just misunderstanding something crucial with how screen resolutions are detected by different devices.
Thanks!
When doing media queries you need to take into account the CSS pixel ratio.
The value you need to use on the media query = (The Advertised number of pixels) / (CSS Pixel Ratio).
This wikipedia page is a good source of CSS pixel ratios to use for this:
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Good Luck
is it possible to create a stroke with a dynamic width with SVG? I want to achieve a Calligraphy look like here, here or here.
Is this even possible? It seems customization of strokes in SVG is fairly limited. Even gradients in strokes seem to be non-trivial (see here).
There is a proposal to add into SVG standard a mechanism, that does exactly what you want:
http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke
http://lists.w3.org/Archives/Public/www-svg/2013May/0041.html
There's even an example implementation available here:
https://rawgit.com/birtles/curvy/master/index.html
It is, however, by no means official and we cannot be even sure it'll ever be.
Until then you'll need to stick to Bezier curves and object filling:
You can also use calligraphic fonts, for example - Tangerine available on Google CDN:
This approach requires less work since you don't need to draw everything from scratch, but then again, using third party fonts leaves you with little control over the final result.
You can't dynamically adjust the stroke of a path element. However you could draw a path, use a fill color on it instead of stroke, then double back upon the letters at a slight distance away from the original line.
Also, if you are using the SVG on the web then you can use css fonts on text elements. There are some pretty good cursive fonts that you can use for free... just check google web fonts.
Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, good solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?
For IE6 transparency I follow a personal flow:
1. If there is just one or two PNG images (like a logo, or a normal image) I just use filter:
#selector {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='crop');}
Problems: If applied to a link, it will no longer be clickable. Possibly apply to the h1#logo and have the a be transparent.
2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG
IMPORTANT FOR IE7 + IE8: You cannot animate or combine the filter:alpha (which is used for overall opacity on an element in IE and also used by jQuery to set opacity) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.
Here are a few good png fixes for ie6:
http://labs.unitinteractive.com/unitpngfix.php
http://www.twinhelix.com/css/iepngfix/
There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the src to the background of the element:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.
We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.
There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.
http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6
Our (beloved) designer keeps creating PNG files with transparent backgrounds for use in our applications. I'd like to make sure that this feature of the PNG works in "older" browsers as well. What's the best solution?
edits below
#mabwi & #syd - Whether or not I agree about the use of a PNG is not the point. This is a problem that I need to solve!
#Tim Sullivan - IE7.js looks pretty cool, but I don't think I want to introduce all of the other changes an application. I'd like a solution that fixes the PNG issue exclusively. Thanks for the link.
IE PNG Fix 2.0 which supports background-position and -repeat!
Also paletted 8-bit PNG with full alpha transparency exist, contrary to what Photoshop and GIMP may make you believe, and they degrade better in IE6 – it just cuts down transparency to 1-bit. Use pngquant to generate such files from 24-bit PNGs.
I've found what looks to be a very good solution here: Unit Interactive -> Labs -> Unit PNG Fix
update Unit PNG is also featured on a list of PNG fix options on NETTUTS
Here are the highlights from their website:
Very compact javascript: Under 1kb!
Fixes some interactivity problems caused by IE’s filter
attribute.
Works on img objects and background-image attributes.
Runs automatically. You don’t have to define classes or call
functions.
Allows for auto width and auto height elements.
Super simple to deploy.
IE7.js will provide support for PNGs (including transparency) in IE6.
I've messed with trying to make a site with .pngs and it just isn't worth it. The site becomes slow, and you use hacks that don't work 100%. Here's a good article on some options, but my advice is to find a way to make gifs work until you don't have to support IE6. Or just give IE6 a degraded experience.
Using PNGs in IE6 is hardly any more difficult than any other browser. You can support all of it in your CSS without Javascript. I've seen this hack shown before...
div.theImage {
background : url(smile.png) top left no-repeat;
height : 100px;
width : 100px;
}
* html div.theImage {
background : none;
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}
I'm not so sure this is valid CSS, but depending on the site, it may not matter so much.
(it's worth noting that the URL for the first image is based on the directory of the stylesheet, where the second is based on the directory of the page being viewed - thus why they do not match)
#Hboss
that's all fine and dandy if you know exactly all the files (and the dimensions of each) that you're going to be displaying - it'd be a royal pain to maintain that CSS file, but I suppose it'd be possible. When you want to start using transparent PNGs for some very common purposes: a) incidental graphics such as icons (perhaps of differing size) which work on any background, and b) repeating backgrounds; then you're screwed. Every workaround I've tried has hit a stumbling block at some point (can't select text when the background is transparent, sometimes the images are displayed at wacky sizes, etc etc), and I've found that for maximum reliability I'll have to revert to gifs.
My advice is to give the PNG transparency hack a shot, but at the same time realise that it's definitely not perfect - and just remember, you're bending over backwards for users of a browser which is over 7 years old. What I do these days is give IE6 users a popup on their first visit to the site, with a friendly reminder that their browser is outdated and doesn't offer the features required by modern websites, and, though we'll try our best to give you the best, you'll get a better experience from our site and the internet as a whole if you BLOODY WELL UPGRADED.
I believe all browsers support PNG-8. Its not alpha blended, but it does have transparent backgrounds.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
You sort of are, and you sort of aren't.
IE6 has no support natively for them.
However, IE has support for crazy custom javascript/css and COM objects (which is how they originally implemented XmlHttpRequest)
All of these hacks basically do this:
Find all the png images
Use a directx image filter to load them and produce a transparent image in some kind of format IE understands
Replace the images with the filtered copy.
One thing to think about is Email clients. You often want PNG-24 transparency but in Outlook 2003 with a machine using IE6. Email clients won't allow CSS or JS tricks.
Here is a good way to handle that.
http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/
If you export your images as PNG-8 from Fireworks then they'll act the same as gif images. So they won't look shitty and grey, transparency will be transparency but they won't have the full 24 bit loveliness that other browsers do.
Might not totally solve your problem but at least you can get part way there just be re-exporting them.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
I have two "solutions" that I use. Either create GIF files with transparency and use those everywhere, or just use them for IE 6 and older with conditional style sheets. The second really only works if you are using them as backgrounds, etc.