I have this site. It fits prefectly in resolutions like 1366/1360x768, 1280x1024. But with res equals or lower than 1280x768 it doesn't fit horizontally and of course a scroll bar appears. Is there a way to automatically "zoom out" or some workaround without having to use media queries to reduce image sizes and div widths?
EDIT: I changed CSS a bit to be able to view the website fine till a res of 1024x768. Anyway the question is still valid (not the example link though).
Related
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 hope the title makes sense. Making an element with a set width and height, I found out that it's much smaller than I expected on mobile and also on Chrome's responsive view on the dev tools.
The reason seems to be that apparently even though a screen is supposed to be, let's say, 320px wide, the body of the webpage is over 900px wide and the width of my element gets reduced accordingly. On desktop devices that doesn't happen and it works alright.
This only happens in some webpages and I don't know the difference. What I'm making is an element that is supposed to be embedded by copy/pasting the code so I can't fix the code of the webpages, just the element itself.
What can I do and why could this be? Thanks a lot.
I'm working on a one-page-project that uses fullpage.js to create scrollable, viewport-filling secions. It's pretty straight-forward, on each slide there is one picture and some text. On devices with bigger viewports, I want the picture to float to the left and the text to appear at it's right side. For smaller viewports, I've added a media query that makes the picture fill the viewport width (width:96vw) and removed the float property (float:none; clear:both;). When I test this in any browser on my PC by reducing the size of the browser window, it works just fine, if the window's width reaches 800px (the condition in the media query is (max-width:800px)), the text jumps below the picture and the picture enlarges to the width of the browser window. The jsfiddle I created works as intended as well:
http://jsfiddle.net/GinSan/ehco10dh/
However, I've uploaded the project to my website and opened it on my android phone, and neither the Firefox nor the Chrome app seem to recognize the media query. It applies the float instead, which looks terrible in portrait orientation ... I've tried adding some more style-rules in the media query, none of which seem to be recognized by the mobile browsers.
I've stared at my media query for like half an hour, but I can't find any mistake. Can you? Or could this be related to the fullpage.js library? Or what else might be the problem? According to caniuse.com, media queries are supported by both android apps.
I would post a link for you to check out the problem yourself, but I'm not sure if I'm allowed to. Am I?
I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc
What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iPad?
I have gone through a lot of online resources, but am still unclear about it.
The visual viewport is the part of the page that’s currently shown on-screen.
The layout viewport can be considerably wider than the visual viewport, and contains elements that appear and do not appear on the screen.
Imagine the layout viewport as being a large image which does not change size or shape. Now imagine you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.
For a great treatment of the issue, see: http://www.quirksmode.org/mobile/viewports2.html
A very good explanation of the two is found here.
In summary:
Visual viewport
The visual viewport is the part of the page that’s currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.
Layout viewport
However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.
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.
How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
In short, the layout viewport is generally the width of the viewport when the screen is zoomed all the way out.
Layout viewport
Its measurements are always the same regardless of orientation or zoom level, just depend on the device/browser window.
Visual viewport
It varies (when zoomed for example). This is the part of the page that’s actually shown on the screen at any given point.
Video example of both layouts
Layout viewport: The green area in the minimap.
Visual viewport: The red box in the minimap.
Layout viewport vs visual viewport (video)
On Mobile/Tablet devices
On mobile devices, things can be a little more complicated by default, because in order to allow a “full web” experience, many mobile devices return a fake higher layout viewport dimensions.
For example, the classic iPhone by default reports a layout viewport width of 980px. This means that if you create a 320px element on the iPhone, it will fill up only about a third of the screen real estate.
However, this mechanism is not so good for pages that are optimized for narrow screens using media queries.
When we are creating responsive websites is very useful to use the viewport meta tag, which lets us control the scaling and layout viewport of many devices (using the real dimensions, not the fake reported).
<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />
Examples of viewport meta tag
Tip: If you are browsing this page with a phone or a tablet, you can
click on the two links below to see the difference.
Without the viewport meta tag With the viewport meta tag