I have a small bug in a website I'm working on.
a specific div contains a paragraph tag. this P tag has a font size for small screens and a bigger font size for big screens. here is the problem. When I resize the browser using the mouse the sizes changes correctly. but if I resize to the small screen and not back step by step by the mouse but by clicking the maximize button ( at the top right ) then again click the same button to back to the small screen the font sizes don't change to the small and all the fonts are so big. is there a solution?
Related
This question relates to web development.
I'm going to start by apologizing for the horrible title but I wasn't sure how to title this. CSS pixels and how they interact with screen resolutions confuse me a bit already, when you add "intermediate pixel layers" and image drawing it's even more nebulous. So here's my actual question:
Let's say that we have an image set to display as 2x1 (css pixels) on a web page. And we instead feed it a 4x1 image (rasterized). The browser will fit this image to the 2x1 css pixels we specified earlier. But, would we technically be able to see all 4x1 pixels on a setup where 1 CSS pixels = 2 device pixels? Or would it instead resize the 4x1 image to 2x1 then display each pixel twice? And does this change on a per browser/device basis?
Bonus points: How does this play into accessibility tools that zoom into web content for the visually impaired? (if at all).
Answering my own question. The short answer is YES browsers will show different amounts of detail based on screen resolution.
CSS pixels ARE NOT screen pixels. If an image is 600x600 pixels and you decide to display it in a CSS-defined area of 300x300 (img:{width:300px;height:300px}), it could display as 300x300 screen pixels or it could display as 600x600 screen pixels. Which of the two it is will depend on the end user's OS screen resolution.
Example:
I created a 4x1 pixel png image:
I added this image to an html page and sized it with a img:{width:2px; height:1px;}. For good measure, I also added a blue div with div:{width:2px; height:1px;} bellow it.
I then set the "css resolution" of the page to half that of my OS screen resolution (If the OS was set to 2000x2000 I made sure that the full html page had a css widthxheight of 1000x1000px). So each css pixel would contain 4 screen pixels.
This is how it displayed:
Both the image and the blue div are 2px wide (that's css pixels) but they display as 4 screen pixels. In the case of the blue div, it duplicates the pixels to fit the screen resolution. But in the case of the image, it displays all 4 individual pixels. In both cases, it duplicates the pixels vertically to fit the screen resolution (technically it's probably more of a stretch than a duplication, but you get the idea).
I'm not entirely sure about this but I'm assuming at this stage that all browsers act in a similar fashion.
I recently noticed this strange behavior in Chrome when increasing and decreasing the size of the zoom and consequently an img.
It might be hard to tell at first but the image on the left is blurred vs the image on the right that is sharp. I took these screenshots from the same image, from the same webpage, in the same browser, at the same size.
The only difference being that, for the image on the right, I scaled my browser zoom up, then down, and took the screenshot before the image had time to 'blur'. The image on the left, is taken a second or two after the zoom in/out commands have finished, and the image gets blurred. As a side note, the same behavior happens when you increase or decrease the rendering size of the img by adjusting the width. I think it's important to note that the image is huge 1920px and being shrunk down to about 300px.
I prefer the look of a crisp image, vs a blurred one, even if it's at a smaller size. Why does the blurring happen, and is it possible to stop it?
I'm trying to create a bootstrap gallery with the thumbnail component. I pulled the code directly from getboostrap.
When viewing the page at full size everything looks fine. However, when I resize the screen to make it smaller the images don't adjust to fit inside of the thumbnail box. What I was hoping to do is have an image that adjusts in size based on how wide the thumbnail box is.
Instead the thumbnail box ends up being substantially wider than the image itself, especially on medium sized screens. The images I'm using for my source images are more than large enough to take up the entire space within the thumbnail.
Any ideas?
Thanks
I have trouble making an embedded google map work properly on mobile devices. It is within a div box and set to 100% height/width and works as inteded when not on mobile phones. On phones it adds a big square-shaped button with an arrow in it in the bottom right corner which consequently shrinks the map size in the div to about half. When I click the mysterious button, nothing happens. So, an annoying button with no function. When I touch the map, the button disappears and the div is filled though. Anyway to get rid of that button?
Is an image displaying in a lightbox script (e.g. prettyPhoto, lightbox, thickbox, etc) affected by high pixel ratio devices?
For example, if I had an 800px wide image up in a lightbox, will it be shown at 800 CSS pixels or 800 actual pixels? To probe further, is an image displayed raw in the browser affected in the same way?
If images displayed with lightboxes are affected by retina screens, what's the solution? Simply link to a larger image? (assuming the script auto resizes images to fit in the viewport)
Perhaps someone needs to develop a new jQuery plugin. :)