I coded a website and wanted to have mobile version and desktop version, my target was up from width 926px site should be in desktop mode, and i just had bought iphone 13 pro max, so i tested my site with it (production). Problem is, it only shows mobile version of the site regardless of whether it's landscape or portrait (on ipad it works fine on landscape and also pc works),
#media (max-width: 926px) { ... }
shouldnt it show desktop when iphone is on landscape and mobile when on portrait?
i got it working on iphones landscape when i reduced width to minimum: max-width: 831px
#media (max-width: 831px) { ... }
iPhone 13 Pro Max
Testing it on chrome dev tools it works fine when changed to landscape but on real iphone it doesnt work (for some reason needs to have max-width of 831px)
Any help is appreciated.
Related
I have a Website with a responsive menu. I tested it with Google Chrome on Android Mobile Phones with a maximum viewport width of 480px I can touch the "Hamburger"-Icon at the top left and the javascript off-canvas-sidebar swipes in. It also works on Desktop Mac with Safari.
But it doesn't work on iPhones (tested it with iPhone 4, 5, 6):
http://fadendaten.herokuapp.com/
(for test resize browser viewport to smaller than 480px width)
Does anyone know why and how to fix this?
If you are using a tablet in landscape mode, when the site first loads you are unable to scroll down. You can turn your tablet vertical and it will scroll then when you go back to landscape mode it will then scroll.
Viewed the site on a Nexus 7 tablet with a 7” screen and seems like the sites break points don’t accommodate to this size.
I have a button that clears an image in Phonegap App. On click it executes the following code:
document.getElementById('image').src='';
It works on my phones, but it doesn't work on tablets. I am not sure why. On all the iPads and Android tablets the image stays there, but it works when it is on Android phones and iPhones.
Edit
$('#image').attr('src','');
Both doesn't work for Tablet, as Peanut said, have to hide it(set it to None, then when you have a new src, then set it back to inline then it will work) but for Iphones and Android phones, the src='' works, just not for ipads and android pads
I've got my responsive website done with breakpoints setted up with #media queries. I've got couple of basic breakpoints
min-width: 1600px - for TVs and bigger resolution screens (that just center the whole page and make white margins on sides, nothing too significant)
max-width: 1024px - for tablets, there are many changes, especially because tablets has of corse touch screen, which desktops usually haven't. At all it looks pretty different.
max-width: 600px - for smarphones, there is also a lot of changes based especcialy on narrowing the content from two or four colums into one.
Now I found that might be a problem, because there are nowdays tablets which acts in the browser, as they have resolution width for example 1280px, but there are also still computers with width of monitor 1280px too, even smaller, so I can't change the breakpoint value for this.
I of course don't want the desktop version on tablet and tablet version on comuter, becase they're created not as much for resolution but more for the platform.
I know that there are things called user agents like WURFL, which seems to be perfect for this. But is there any way how to connect this value from WURFL (tablet, desktop, smartpohne...) with css #media queries.
For example detect in WURFL that the device is tablet and change the breakpoint value in CSS file, so it shows the tablet version, instead of desktop version? Or is there any other way with similar result as this theoretical solution?
There is no need identify the device, just use the right media queries.
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
I think you are looking for this
jQuery code to detect mobile devices
http://www.webtrainingcentre.com/jquery/scripts/jquery-code-to-detect-mobile-devices/
I have designed a website using media-query.
In the browser it is looking perfect. But when i am checking in the tablet or in mobile device, in portrait mode it is good,
but when I am changing the device orientation portrait to landscape then it is not looking perfect. So my doubt is "is there any meta-data to disable the device orientation, so even though user change the device orientation then the content will not rotate."
thanks,
naresh kumar.
If i understood you properly, you no need to disable the orientation but rather you can adjust screen elements even when the device is rotated. You can use the below queries:
#media all and (orientation: portrait) { ... }
#media all and (orientation: landscape) { ... }
Because a good design should fit in all devices and in all orientations perfectly...