I'm having an issue with background-size: cover on mobile devices (tested on mobile safari and android).
There are times in which the height of my webpage changes when the user expands a more info box. Whenever that happens on mobile the background image actually zooms in. On desktop it does not.
I worked around this issue by adding a "scrollable" layer in the CSS, but this introduced more issues.
Any suggestions on how to fix this, or is the "scrollable" layer my only option?
I believe that the mobile browsers are simply adjusting the background to be what it would look like if the site initially loaded at the "expanded" size, however, on desktop it does not do this.
Using responsive design might help you to get rid of these issues, the method is design for developer who creating a website for both desktop and mobile device.
I will give out an example:
In your CSS you have:
#media screen and (max-width: 700px) {
.hide {
display:none;
}}
In your PHP/HTML you have
<p class="hide"> tester 1234 </p>
These will let your display your text when the screen size is bigger than 700px, disappear if smaller than 700px.
I think you should be able to do some modify for you codes by now, hope this help.
Reference : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Related
Screen Size unchanged on Mobile
Briefly explaining this, I have a Chat App that works well on a desktop view but when we go into mobile it seems that the device simply mimics the size of the desktop screen (ie: on my Oneplus 6 the <html> tag is around 4000x2000px). I'm quite new to HTML mobile scaling so forgive me if the wording for this isn't to par with what's expected.
Continuing, on my desktop if I manually change Chrome's window size my webpage scales perfectly while on my mobile device it's huge as said in the previous line. Would using the #media tag in css help specifically for this? If so, how?
One last thing, if I zoom in manually on my mobile it obviously looks perfect as it's meant to fit the new tall aspect ratios. Which is ultimately what I wish to do, just need to keep the website scaled perfectly like on the second picture (picture B).Image B
This is my first time designing a responsive website. I am trying to do a break point of max-width of 480px, but Google Chrome does not allow me to resize the window below 500px. Is there a way to do this?
For this you need to inspect(ctrl+shift+i) your html and click on the highlighted icon as shown here:
When designing a website, the website looks proper on all displays and browsers. However, when moving towards HDPI displays (above the resolution of 1920x1080), chrome and Firefox scale the content by default. This makes text, that looks correct on Microsoft Edge, very big. I could change my browser settings but the not everyone would.
I would like to know how to have the text scale properly and look the right size on HDPI displays.
Use Media Queries
#media screen and (max-device-width : 1080px)
{
body or yourdiv element
{
font:<size>px/em/cm;
}
}
This Link might help as well. Optimize for Displays
http://stackoverflow.com does this, as well as www.ancestry.com. How do these sites keep from showing the mobile layout on a desktop when resizing the browser window if they don't have a separate subdomain? With my understanding, media queries will resize the website according to the viewport, but the both StackOverflow and Ancestry only resize to a certain point - on a phone the layout is completely different. Any help with this? I'd like to know how sites like the examples given achieve this.
Technically it's done by forcing a min-width on your document, which will incur horizontal scrolling below that size, with:
html {
min-width: 1000px;
}
But you should only deliver such CSS if you a have a 100% guarantee that this site will be served only to desktops. That can't be applied to mobile devices. Showing the mobile layout on desktop if a user resizes the window is perfectly normal. It naturally adapts to split screen mode situations.
I should probably make this a comment but they look at the device width, not the viewport width in their media queries and javascript. (I'm sick and don't feel like writing any more). There are also services available that can help you detect what type of device there is. However, these services can be slow and pricy sometimes. More often not worth the effort.
You can detect if your viewer is a mobile or a PC, then load different CCS files.
One way you can detect if there is a mobile is by javascript UserAgent BUT it is not very effective.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// is mobile..
}
I haven't tested this recently, but there is a 'mobile' device specifier:
#media mobile and (min-width: 400px) {
.col { width:50% }
}
#media mobile and (max-width: 400px) {
.col { width:100% }
}
That'll work on mobile devices, but not desktop
I deployed the same scenario on a WordPress site using "mobble pluging" which simply detect the device then generate a HTML version for mobile, tablet or desktop.
I have being tearing my hair out trying to get a fix for this, the site is built with Twitter Bootstrap and is responsive, and works fine on all devices apart from iPad & iPad mini in portrait where it is always wider that the devices screen.
I know that there is a problem on device rotation with iOS devices, but this is on page load in portrait.
Any advice would be great, I am not sure if it is a problem with Bootstrap or something I have done.
http://bodysgallen.ws-django.co.uk
you may need to make a new set of responsive CSS to fit that screen size.
EG you have something like this #media (max-width: 979px) & #media (min-width: 1200px). You might need to add another one in between to handle the size of the iPad on portrait.
I'm not sure if the problem is related specifically to iPads. Something odd is happening with your grid at a viewport of 769px - 945px (approx). It's not responding correctly.
If you check validation results for the page there are a number of errors which aren't too important but at the end there are two I would fix, an unclosed container div and a body tag that was already closed. http://bit.ly/11fKdhG
While these 2 errors aren't necessarily the cause of the problem, I think you want fix them first.
Hope this helps!