I have recently tried to make my website compatible with mobile devices, which unfortunately is more complicated than I wished.
I ended up using the following approach:
.mobile_device_480px {
display: none;
}
/* if mobile device max width 480px */
#media only screen and (max-device-width: 480px) {
.mobile_device_480px{display: block;}
.desktop {display: none;}
}
And then encasing all parts that needed to be show in a special way for phones in a mobile_device_480px div and everything else in a desktop div. This works perfectly fine for my android phone, running its native browser. However, on my iPhone running safari it displays both for mobile_device_480px and desktop.
To give an example, on mobile i want the following size of the text area
<textarea rows="3" cols="77" wrap="soft"> <\textarea>
and on a desktop I want a larger text area of
<textarea rows="15" cols="100" wrap="soft"> <\textarea>
This displays correctly on my computer and my android phone, but on my iPhone both areas show up, so it looks like it just ignores the display: none;
I am literally lost and have tried to work on this problem for several hours and don't really know where to start, if it is a problem with the code, operating system, browser etc.
Edit: The two phones are approximately equal in size.
Any and all help is much appreciated.
I suggest you to replace
#media only screen and (max-device-width: 480px) {
with
#media (max-width: 480px) {
Which will target every kind of device
Related
I have written some HTML and CSS for a website, and some media queries to reformat the code when the screen shrinks. This works on browsers, when I shrink the browser window size, but isn't working on mobile devices. Can anyone think of why? See the Media CSS below:
#media screen and (max-width:500px) {
#education-table td {
display: block;
text-align: center;
}
}
Thanks in advance!
I have looked at similar issues and thus added the "screen and", but this has not fixed the issue.
Update: I am testing the code on a pixel 7. When resizing the browser to the same width as my phone it works perfectly. I have ensured my phone width is indeed below 500px. TO clarify, this code works when used on a browser where I have both emulated a pixel 5 (through dev tools on edge) as well as just resizing the browser window. However, when I load the same site on my pixel 7 (and a pixel 6a, + Samsung galaxy a30) this CSS does not kick in, and it loads the standard "desktop" CSS styling - so the columns of tables do not collapse and are impossible to read
This code is valid CSS and works like intended. It just applies to devices with screens smaller than 500px. I would recommend you to set the size to something higher like 768px.
The screen and just ensures that the style is only applied to normal screens and not the print-view or anything else.
As others mentioned, your code is correct and should work on mobiles, it just depends on their screen size.
If you want to reformat your layout for mobiles in portrait orientation independently of their screen width, you might want to consider the following:
#media screen and (orientation: portrait) {
#education-table td {
display: block;
text-align: center;
}
}
Solved it!
I needed to add this line to the HTML document -->
It was not linking the device width before I added this meta tag. Thanks for the help from you all
For multiple years I've been using min-device-width or max-device-width to differentiate mobile from tablet. Mobile CSS moves the cascading navigation menu to the bottom of the page, and simplifies the styling for readability. Tablet CSS leaves the page styling alone, as the screen size is sufficient to not require simplification. I have only iOS devices to test with. It works, but both min-device-width and max-device-width are deprecated in CSS and I am trying to move to #media to continue serving different CSS to both devices.
Where I am falling down is finding a clean method of doing so. My hope was that I could use some query like hover: none or pointer: coarse to detect one platform vs. the other, but iPhone and iPad both show as no hover, coarse pointer. My second attempt was to couple these queries with screen width query, but that has been a mess. Apple documentation shows native portrait-mode screen widths for recent iOS devices to be 640 to 1125px width for iPhones, and 1536 to 2224px for iPads. However, querying width in JS on my phone comes up with numbers that seem to instead match the UIKit widths (320-414px). Using a CSS #media (max-width: 450px) should match a phone, but it doesn't - it seems that the CSS is reading the native resolution width but JS is reading the scaled width. To get an element to only show up on my own iPhone I need to set max-width to something like 999px, but if it's truly reporting native resolution this would fail on an iPhone Plus - my phone is on the lower end of the screen size.
This seems pretty ridiculous. Is there a better way to serve one set of CSS rules to a mobile and another to a tablet, without having to set 37 different potential screen shape entries or use deprecated elements? I really don't want to have to rewrite my CSS every time a new phone model is released, or resort to browser sniffing - the less scripting running on the backend just for basic page display the better.
Per request: My really simple test file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<script>
window.onload = function(){
var devpxratio = window.devicePixelRatio;
var devwidth = screen.width;
document.getElementById('ratio').innerHTML = devpxratio;
document.getElementById('wide').innerHTML = devwidth;
};
</script>
<style type="text/css">
.mobile, .tablet, .desktop, .touch, .hover, .fine, .phone {
display: none;
}
#media (hover: none) {
.mobile { /* show all mobile-specific content */
display: block;
}
}
#media (pointer: coarse) {
.touch { /* show touch-only content */
display: block;
}
}
#media (hover: hover) {
.hover { /* show hover-capable content */
display: block;
}
}
#media (pointer: fine) {
.fine { /* show fine pointer content */
display: block;
}
}
#media (hover: none) and (max-width: 375px) {
.phone { /* guessing at mobile vs tablet based on width */
display: block;
}
}
#media (hover: none) and (min-width: 1000px) {
.tablet { /* guessing at mobile vs tablet based on width */
display: block;
}
}
#media (hover: hover) and (pointer: fine) {
.desktop { /* show stuff that would be visible on desktop */
display: block;
}
}
</style>
</head>
<body>
<p>Device pixel ratio: <span id="ratio"></span></p>
<p>Device width: <span id="wide"></span></p>
<p class="mobile">No hover detected</p>
<p class="touch">Coarse pointer detected</p>
<p class="hover">Hover detected</p>
<p class="fine">Fine pointer detected</p>
<p class="phone">This is likely a phone</p>
<p class="tablet">This is likely a tablet</p>
<p class="desktop">This is likely a desktop</p>
</body>
</html>
Expected outcome on my iPhone is:
Device pixel ratio: 2
Device width: 375
No hover detected
Coarse pointer detected
This is likely a phone.
Actual output is:
Device pixel ratio: 2
Device width: 375
No hover detected
Coarse pointer detected
I can't get it to output "likely a phone" unless my specified max-width is 980px or higher. None of the results seem to make any logical sense. Javascript check for screen width tells me 375px, which matches expected screen width for my phone (second generation iPhone SE, which uses same screen as iPhone 8). Apple documentation states native resolution of an iPhone SE is 750px with a UIKit width of 375pt. I cannot find any math whatsoever to tell me why the numbers come out as they do. 375pt should be 500px, not 375; there's no logic to why the calculated screen size doesn't match the screen size used by CSS in the test page, and I cannot make heads or tails out of why any of the screen size numbers can relate to a CSS width of not more than 980px, unless the scaling factor is being reported incorrectly - it shows as 2, but scaling of 2.6 would result in a 375px screen equating to 980px. Again, especially with manufacturer specs, determining the screen size break points should not be this difficult...
Usual practice for responsive design is to address just several groups of devices defined by max. viewport width, so you don't need to fiddle with every possible screen size individually. As an example you can start with these:
https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
Anyway CSS #media (max-width: 450px) should definitely match the phone of 320-414px screen size (since 320 < 450)... Could you please show us some code where it does not work for you?
So I'm having trouble getting my div to resize based on if it's a mobile (specifically smartphone) device. Now the mobile device I'm using is the iPhone7plus. So I'm not sure if the dimensions I have are for this device.
my original css (for desktop) is this:
div#allContent div#mainContent div#contentText {
width:50%;
/*other styles*/
}
So the text on the screen is on one half of the page and the signup form will be on the other half. Now when I view in my iPhone the drop down items from the form are too big and I can't see the text inside the drop down boxes. So I'm trying to get the width of the contentText div to be 100% then also the form div to be 100%.
I added this to the bottom of my css file
I've tried this first line to:
/*#media only screen and (min-device-width:320px) and (max-device-width:480px) {
#media screen and (min-device-width:320px) and (max-device-width:480px) {
div#allContent div#mainContent div#contentText {
width:100%;
}
div#allContent div#mainContent div#signupContent {
width:100%;
}
}
Is it because I have a larger mobile device that it's not working? Should i increase the max values? I'm just learning mobile device support.
Mobile device max-width can be 767 after that i pad and notepad device width starts.
#media screen and (min-device-width:320px) and (max-device-width:767px) {
//code comes here
}
I think the media query syntax is different in your code
#media screen and (max-width: 480px){
}
I hope this media query will work for iphone portrait mode.
Maybe your problem is a syntax or you are not selecting the target correctly, if you post your full code (HTML and CSS) we could be more helpful.
Regardless, you could use min-width and max-width instead of *-device-width.
I have created example on CodePen, check it out it will help you.
http://tynesideelectrical.co.uk/
In this website displaying a phone number banner on header.
i need to display a 'click to call' image instead of this number banner while browsing from mobile device.
using with CSS.
Any hope. ?
Using CSS, you can embed images via the background-image property and then combine it with media queries to load different images on desktop and mobile.
/* For desktop */
#media (min-width: 721px) {
.header {
background-image: url('img/desktop.png');
}
}
/* For mobile */
#media (max-width: 720px) {
.header {
background-image: url('img/mobile.png');
}
}
Media Query's are your friend here!
You might want to look into:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
It checks the device/monitor, and according to that you change the styling.
Theoretically you can use simple
#media handheld {
/* rules for mobile phone */
}
#media screen {
/* rules for computers */
}
but (new) smartphones make a pretense of they are normal computers and will not react on handheld.
There's no exact way … you can only identify phone by smaller resolution (but seems that not for a long time)
I'm using media queries in my css:
/* Tablet */
#media (max-width: 979px){
}
/* Phone */
#media (max-width: 767px){
}
When I drag my browser really small on my desktop computer it switches to the phone layout, is there a way to prevent this so the small size is only seen on the phone?
There isn't really a need to do this. This is the point of responsive, it's device-agnostic. So if a user comes to your site on desktop but their browser is really skinny the content will fit it (such as the Windows 8 Metro IE10 sidebar thing). You don't want to limit it only to phones, once you've done that you're going down a road that isn't meant to be traveled with responsive.
Sure you can, but the question is you really think the overkill need for it will be valid?
You can add a class to the HTML tag for phone devices (using JavaScript or any other method to verify if its a phone or not) and use this class inside the #media so only when this class is applied the media queries will take effect, small example:
HTML:
<html class="phone-device">
</html>
CSS:
/* Phone */
#media (max-width: 767px){
.phone-device{
}
}
But again this is not the right thing to do...