On my webpage, I use images that are 720px by 480px. If I look at them in Firefox or IE (latest version) however they look scaled up, they are considerably larger on the screen than their original version in Lightroom. If I look at the dimensions of the picture on the web though, it says that it is 720x480. If I want the files to be as big as they should be, then I have to set the width-property to 600px, which I think is odd..
The webpage uses Bootstrap 3.3.4.
There may be styles being applied by Bootstrap or something else, which are causing the issue. If you look in the inspector of your browser, it will show you all of the rules that apply to a given element. Also, your browser may be zoomed. The shortcut to reset it to default is usually Ctrl-0, though there is also usually also an option listed in the menus.
Related
I recently tried to load a tool on my phone that I develop that is hosted internally where I work.
A few things looked off, which I expected. But one particular element seemed to be extra odd.
I eventually loaded the page in Chrome on a MacBook Pro and used the "Device Toolbar" feature to render it in my Desktop browser like it would on a phone. To keep a private application private I will demonstrate with Google.com. This is what I see:
That's the body element highlighted in blue. The html element is the same.
This is what I see in my application too and explains what I'm seeing when actually using my phone.
I can't, for the life of me, understand why these elements chose this size. There is no explicit "width" for these elements, nor is there "max-width" etc. Nothing that I can see that should cause this behavior.
Can anyone explain this behavior?
UPDATE
It appears that there is some odd behavior with Dev Tools. Proper mobile testing probably shouldn't be done this way (Feel free to change my mind, Google...) but the issue stands that sometimes, the body element doesn't stretch to accommodate its content.
By default, block-level elements, including <body>, do not expand to fit their content, but rather will expand to the width of its container. See the spec for detailed information.
See this fiddle demonstrating this. If you resize the panels/window you'll see the body width changing based on the viewport, but the content width has absolutely no effect.
This SO question has more information: Why isn't <body> expanding to fit its contents?
Another issue that's not helping is related to the Chrome dev tools device toolbar. Changing the zoom, disabling and re-enabling the device toolbar and its settings can be buggy and is not always reliable. I have spent hours chasing issues that didn't actually exist because the device toolbar functionality misled me.
I am using Wordpress with a responsive theme. When I display the content on a mobile device the theme is displayed properly with a regular browser.
When switching into the broswers 'Desktop mode' the responsive theme behaves little bit strange. I guess this is due to the used screensize. Is there a way to display the used CSS media query?
In sense of when CSS says media min-width: 1024px can I see somewhere which screensize CSS is using? Or does there exist a simple page where to test it?
Or even better: How to detect if the browser request a 'Desktop version' of a site and use it for CSS?
I Googled but didn't find any help how to detect it but didn't come up with helpful hints.
window.innerWidth is what you're looking for. Plug it into your dev console and you'll get the exact width after scaling in pixels.
You can use the inspector-tab from the developer tools inside the browsers to view the css-rules an element currently uses.
You can also see and set the size of the browser viewport with the help of the developer tools. Most browsers have a set of presets to simulate specific mobile-screens. This is very helpful for testing and debuging responsive rules/styles.
In styles panel of dev-tool you can search for it.
You can also use show-hide media-queries option.
Is there a way to display the used CSS media query?
I think what you're looking for can be found in your browser's dev tools. In the screenshot below, I tried resizing this exact same page and inspect it using Chrome dev tools. Under elements tab and styles you can see if your media query is being triggered. Please see the screenshot below...
can I see somewhere which screensize CSS is using?
Your browser dev tool will most likely have a feature that displays the current size of your browser window. In the case of Google Chrome, you can see the current size of your browser at the top right corner of your screen while you resize. Please note that the size will only display if the dev tools is currently open and you're resizing the window. Please see the screenshot below...
P.S.
ADDITIONAL:
If you want to have more like a javascript solution, you might want to check out this library. https://github.com/ryanve/actual
Based on the description, it "Determine actual CSS media query breakpoints via JavaScript". Please note that I have not personally used the library myself so I can't really say that it works.
You might also want to check this article that discusses how to detect a media query using Javascript - http://zerosixthree.se/detecting-media-queries-with-javascript/
Hope this helps! :D
the easiest solution is to use 'Window Resizer' (2.6.4) chrome extension
it will give you a popup window that will allow you to resize the view port to any of the standard sizes (xs, sm, md, lg etc.)
open the website in your computer browser and reduce the size of the browser like this example and right click on the center of the page and click inspect then you will be able to see all css style of the website when the website is small
I'm having an issue with my site displaying the contents of an iframe properly (it's a dashboard from Metabase if anyone is familiar with that).
On my large monitor the dashboard shows fine, however on my 13-in laptop some of the numbers are obscured by an arrow. This is only the case in Chrome, as Firefox doesn't have the issue.
When I take the zoom down to 90% everything shows flawlessly on the 13-in resolution, however I don't want my users to have to manually zoom out just to make the page appear properly.
I've used all kinds of zoom, transform, and scale options to get this looking right but whenever I get it working on the small resolution it just breaks on the larger one. And the CSS code doesn't seem to be the same zoom as if you do it manually through Chrome, if that makes sense. It just doesn't work the same way.
I'm not sure what to do except maybe have the screen size auto adjust for a smaller resolution to 90% but I'm not sure how to do that or if it's even possible.
Any ideas for what I can do?
You can use different CSS code for different screen resolutions using #media tags.
You could also try the CSS zoom property on the html or body tag, but some people don't recommend it.
I am optimizing my site for these higher resolution monitors (especially the new iPad). I have the site formatted the way I want, and I was just increasing the resolution of each image but still constraining it to the DIVs that I currently have. For example, I have an image with a resolution of 483x246 and I have it fitting a DIV with a set size of 188x96.
The images look great on Chrome, Firefox, and most importantly on the new iPad. Even zoomed in it's nice and crisp (as opposed to my old 188x96 image that looked blurry and pixelated when zoomed in)
The problem comes in when I open the page in IE. It displays the image at the correct size but it's jagged. See link to comparison below. I know it's an issue with the way IE resizes and renders pictures on the fly.
My question would be, is there a way to make IE display the picture nicely? If not, is there a way I can put in the code so that if it detects IE, it displays my old low res image? I've looked everywhere but haven't found anything that relates to my specific problem. I know this is a small example but my bigger images do the same thing and are more noticeable. I hope you all can help. Thanks. :)
Comparison:
Have you tried putting this in your CSS?
img { -ms-interpolation-mode: bicubic; }
There's also this https://github.com/adamdbradley/foresight.js which looks very interesting
Make sure IE9 isn't in compatibility mode or IE7/8 mode...
The reason this happends if because the bitmapdata is actually rendered completely different in the IE browser, the thing IE does is it "cuts" away pixels over a set ratio so like every 5 pixels it yanks a pixel and therefor makes it look like it misses certain gradient properties.
not much you can do about this except for keeping the aspect ratio set but I guess you would've known that by yourself already
Sincerely hope someone can provide solution for this.
Normal zooming by holding Ctrl + Scroll (or +/-) is useful but it just doesn't work in certain part of some sites.
For example:
http://www.freemalaysiatoday.com/category/living/2012/04/02/malaysias-top-rock-act-blister/
As you can see, zooming in and out has no effect at all to the text in the comments using facebook account. This problem only happen to Chrome but not IE or firefox.
No matter how large other font becomes, the size of the font (yes, font only) in comments remained unchanged and this is annoying.
Any solution please?
Look at:
http://code.google.com/p/chromium/issues/detail?id=104083
It can be achieved with the css rule -webkit-text-size-adjust: none;.
If one wants to disable it, the link also contains a solution in step 8, using an extension CSS rules are inserted in all pages which override this