I am having a problem where my images don't scale down when they are on mobile.
I'm using images as a background layer on the site each with parallax effects.
If I look at the site using the chrome dev tools on an iphone 6 it scales them down but on the actual mobile device it does not.
I tried using media queries targeting an iphone 6 directly and also tried again with one that switches out the image to a smaller version.
Any ideas on what to do?
Related
I'm experiencing a weird issue with the mobile responsive layout of a website.
The address is https://melec.vercel.app/
On desktop using dev tools > responsive, it works correctly, also on any android device you get the correct mobile experience but in iOS devices (tested on 2 iphones) the website renders incorrectly, it seems to have the double of the actual available screen width.
For reference I'm using tailwindcss, tailwindui and nextjs.
In this image you can see the scroll bar for horizontal movement.
Here you can see how I can freely move horizontally, this doesn't happen on dev tools or android devices.
Also when I press the mobile burger the whole layout shrinks a bit.
it is because the top part "flex-shrink-0 flex items-center".
I entered a "max-width: 100%;".
A simple one - here is my site - http://michaelmedvedskiy.website
I'm loading it through the same wifi network, in my pc browser the background video loads fine - pc fullscreen perspective
And if i stretch the screen down to the mobile's perspective it works fine as well - pc stretched perspective
But on my mobile device (Sony Experia X5) it just doesn't load - mobile perspective
Why so?
Hopefully, I wrote the question properly, if I didn't, please remark my flaws, I will correct them.
Background videos are not auto playing on mobile devices. It's default setting. You may try to play manually using player API
I have a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.
I'm trying to make a site that will be responsive on mobile devices but not on desktop computers.
I created a media query with the following breaking points: 320px, 321-480px, 481-680px, 681-778px, 779-1280px. The problem is that these apply to resized browsers on desktop computers too and display the mobile version. I want it to ignore these breaking points and display the desktop version of my site regardless of window size.
Is this possible? Thank you very much for an answer!
It doesn't make a lot of since to make a responsive site that is only responsive for mobile. Maybe use a server side script for device detection and make two separate sites for mobile and desktop.
I have a few questions about Bootstrap:
1) Implemented our application using bootstrap keeping in view the laptop and Desktop Display.
However now need to be viewed in all touch devices.
2) I've heard Bootstrap supports Responsive CSS supports in all devices(Touch and Non-Touch), however it is not supporting, sometime the layouts appears wierd and doesn't look good.
3) For ex: attaching a sample screen how it appears in normal view and Touch Device (Iphone 5), observed in Chrome Mobile & Tablet emulator.
Is there any good way, so that it looks feasible and compatible in both Touch and Non-Touch Devices.
Yes, if you use bootstrap classes correctly, there will be no broken view on any size screen. To test it, you can use FireFox CTRL + SHIFT + M (don't know combination on chrome, but there is that tool too)