Very simple, I've created a report, and use printThis.js JQuery plugin, which works perfectly on all browsers and all platforms, except when I send the report via IE, the CSS inch measurements, which should be inches regardless of browser, all the sudden are 2/3 of their normal size. All browsers are set to LETTER size 8.5 x 11, so the page setups are identical.
On Firefox, Chrome, Safari, 1 inch is 1 inch. On IE, 1 inch is .75in.
I've searched all over the web, but given that IE has metric tons of problems associated with CSS, the results are impossible to isolate to my issue. I'm sure there are answers out there, but I can't find them amid all the legacy issues with this pile of steaming browser.
Appreciate any help.
Question: How do you make 1.0in in CSS 1.0in in IE printing?
Related
Sections of my site look a little different on Chrome Dev Tools simulating an iPhone 12 than an actual iPhone 12. Why is this? I've signed up for browserstack. Do you guys think they produce an accurate representation of a site on different devices? Do you recommend any others?
This is the site (iPhone 12) on Chrome Dev: https://snipboard.io/OpU8aj.jpg
Same site on my iPhone 12: https://snipboard.io/vl6b8f.jpg
Notice the type in relation to the red background?
I'm wondering too... This is the first time I've used %'s for my padding and margins. I usually use em, rem or px. Could using percentages have something to do with it? I do understand the the percentage is based on the parent element. But still... not sure if that has anything to do with it.
Thank you
I was having the same issue. I learned, and I'm sure most of you know this, any iPhone above an iPhone 8, that Apple's documented viewport size is not the actual pixel size (w x h) that displays a website or app. I discovered this after researching Apple dev docs. There is now a "safe area" leaving room for native device buttons on the top and bottom in portrait mode, or both sides in landscape mode. You subtract the area for these buttons from the manufactures documented viewport size to get the real displayed viewport or "safe area". Of course it will be different for every device.
I hope i'm not breaking any rules with the following. I used "what is my viewport" https://whatismyviewport.com/ Pull up this url in any device and it will show the actual width by height in px, of that device. This is the actual size your website or app will be displayed at.
I am now able to set new media queries using the above info instead of media queries based on the device manufacturer's documented viewport size. This solved the issues I was having.
I understand em sizes are relative to the parent font size. As discussed in other threads (such as Font-size issues comparing chrome and Firefox), the default font size could be different for different browsers, so one should set it and/or use some reset css stylesheets.
I also understand that different browsers may render things in different size if they have a different zoom size.
Nonetheless, for a given parent font size, 1 em should translate to the same number of px, regardless of the browser.
However, in some cases (e.g. https://openlayers.org/en/latest/examples/custom-controls.html, https://github.com/openlayers/ol3/issues/6194) some elements with the same size in em are translating to a different number of px in Firefox and Chrome.
How is that possible?
Edit: On further testing on the same computer:
Firefox 50 on Windows and Chrome 55 on Windows 10: map icons are 25px
Firefox 50 on Linux and Chromium 53 on Linux: map icons are 33px
As mentioned by #Pedro_Costa, the .ol-touch style is being triggered only in some browsers, this is making the fonts bigger as per the following CSS rule:
ol-touch .ol-control button{font-size:1.5em}
So, the issue is that Open Layers is detecting touch capabilities only in some browsers and OS.
Checking the OpenLayers code I see:
ol.has.TOUCH = ol.ASSUME_TOUCH || 'ontouchstart' in window;
Which looks all right. So, apparently it is an issue of Chromium in Linux and Firefox in Windows that are not detecting correctly the touch screen and therefore not exposing the ontouchstart element.
So I have noticed that a website I created looks bigger in Chrome than it does in IE11.
I couldn't figure out why. The zoom was set to 100% in both browsers.
If I go to http://viewportsizes.com/mine/ it reports the following viewport sizes:
Chrome - 1280 × 619 and IE11 - 1920 × 906
My question is why does this happen? How can the two browsers report back two largely different sizes?
Please tell me what device are you using? (IE Version, Windows Version, Device size)
Probably you use a mobile device (like 10 inch tablet) with Full HD resolution. Unfortunately I have no such Windows device, but this is a common behavior of mobile devices and chrome/firefox.
The reason shortly is that viewport does not represent the screen resolution and is mostly optimized for better user experience. Here I mean, that for an 10 inch device, browsing webpages in full resolution would result in a non readable webpage, a short example you can find here
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
More details about viewport you can find here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Note that IE is 'integrated' with the operating system, meaning, that DPI settings on your device also should have influence on IE (icon text size on your desktop and context menu text size is probably the same as a text in IE).
I'm trying to turn my icons into font glyphs.
Now, the problem is antialiasing of the font in Google Chrome on Windows 7 (it looks good on OS X). I took two shots, where on the first one you can see the desired behaviour, as seen on Firefox/Windows 7 and all the other browsers, except Google Chrome, which is the second shot. Is that problem in font itself? Or is it because of system settings? Is it in CSS settings?
Firefox 12 Windows 7
Google Chrome 18 Windows 7
The most problematic parts are highlighted with red.
Use CUFON instead of #font-face it's a better option as per the rendering font in windows because CUFON put the font in canvas & it's look smooth in windows.
Using text-shadow helps a little, try adding a little bit of shadow with 4-6 pixels of blur. Play around with it and you may find the "sweet spot." Some font sizes also seem to be more problematic than others, try taking it up or down a pixel or two and see if that helps. I'm tilting at this particular windmill with Google right now and hoping I can get someone's attention. In this image, the top example is IE9, the bottom example is Google Chrome (both Windows 7). https://twitter.com/#!/tacomamama/status/197397136470589440/photo/1
There is an embedded Vimeo video on a site I'm developing. Nearly all of the target audience uses IE8 or below, and for reasons unknown nearly all of them have their browsers zoomed to 125% view. Thankfully everything else on the site works under those conditions, but the video in the iframe is zooming oddly and cutting off content.
http://imgur.com/a/pg53V
That is an album with the iframe normally and zoomed, as well as the embed code provided by Vimeo. There is absolutely nothing special in my CSS or JS that changes the iframe's default properties. I'm certain I'm not the first one to have this problem, but apparently I just don't know how to ask the question to lord Google. Thanks for your help.
Internet Explorer 8 will automatically zoom to 125% by default if your display settings are set to 120 DPI. This does however sometimes confuse plugins such as Silverlight and Flash. It is possible to detect the zoom level in script and you could potentially use this to make adjustments. See Making the Web Bigger: DPI Scaling and Internet Explorer 8.