I'm developing a jQuery Mobile app. There's a ton of dynamically generated CSS to it and thus far I've been developing everything for the portrait orientation. The obvious problem is that when I tilt my device it looks very bad. I don't need to have a landscape view for the app but I'm not opposed to it either. Can anyone suggest an easiest solution the options being either a landscape view or somehow locking the app in portrait mode?
There is two way to check orientation..
Firstly
1)
$(window).bind("orientationchange", function(evt){
alert(evt.orientation);
/*do what you want.*/
});
secondly using css you can check using min-width .I am using iPad then i check for 768 and 1024 .Do the things
#media screen and (min-width: 768px){
#realTimeContents {
overflow-y:auto;
-webkit-overflow-scrolling: touch;
position: relative;
height:850px
}
}
#media screen and (min-width: 1024px){
#realTimeContents {
overflow-y:auto;
-webkit-overflow-scrolling: touch;
position: relative;
height:600px
}
}
Related
I have this case when I would like the PWA to be always the same 100vh even when an input is focused from a mobile device and the client keyboard appears.
As of now the whole 100vh concept breaks with a keyboard open as in this image:
Anybody has any clue to a solution?(without JS if possible)
Maybe with this CSS you could achieve what you want
:root {
--body-size: 100vh;
}
body{
height:var(--body-size);
}
#Media only screen and (max-width : 400px) {
input:focus{
--body-size: 50vh;
}
}
I have done a website in ReactJS and SASS. Everything went well until I tried to make it responsive. The width is weird on smaller devices.
This is the website: https://uidea3.netlify.app/
Help me! Thank you!
Your .header class has fixed width of 1024px. Remove it and the website will not overflow. If you need to make it responsive then you can add the media query like this. You will need to figure out the correct breakpoints for your use case you may refer to the bootstrap breakpoints
#media only screen and (min-width: 1023px) {
.header {
width: 1024px;
...rest of properties
}
}
#media only screen and (max-width: 1023px) {
.header {
width: 100%;
...rest of properties
}
}
Explore on react-media a package available in npm. It will render component or element based on your configured device size.
Many questions on this but.. when I use this css code. It works on the devices and not when I resize the browser.. But if I change my css to "min-width" instead of "min-device-width" does not work at all... neither at my browser nor my phone device.. Any thoughts? Thanks
#media only screen and (min-device-width: 768px) and (max-device-width:1000px) {
.footericons {margin-left: 37%;}
.logo img {margin-top:-15px; width: 120px;margin-left:-55px;}
.welcome {margin-top:-20px;}
}
no need putting only just "#media screen", also just use min-width and max-width...
#media screen and(min-width: 768px) and (max-width:1000px)
This should work. If it doesn't, show us the rest of the CSS or SCSS please.
#media only screen and (min-width: 768px) and (max-width: 1000px) {
.footericons {
margin-left: 37%;
}
.logo img {
margin-top:-15px;
width: 120px;
margin-left:-55px;
}
.welcome {
margin-top:-20px;
}
}
When using min-device-width and max-device-width you check not by resizing browser window but your browser developer tool.
For Chrome it is Device Toolbar, shortcut Ctrl+Shift+M
For Firefox it is Responsive Design Mode, shortcut Ctrl+Shift+M
Change your queries to use min-width & max-width and it will then work with browser resize and also with developer tools (Device Toolbar, Responsive Design Mode).
You can check this tutorial this - CSS Media Queries tutorial for creating a responsive website design.
I am developing a website with a desktop and iPhone 4 viewport. When I am doing the bulk of development and viewing it through my desktop's browser using a viewport chrome extension, it is rendered fine and looks good. But when I view it on my iPhone 4s the width is corrupted. I have no logic that tells it to act like this. I cannot see what the issue is, was wondering if anyone could think of some possible problems?
Desktop (at 320 viewport): -----
iPhone 4S:
Query used for the .container{} class that wraps the entire site.
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (min-width : 320px) {
.container {
width:75%;
}
}
Many thanks for your help.
You likely have two problems at work here that are unrelated to your .container. Why do I think this? Your menu is showing up nice and large but your other content isn't. You said .container wraps everything. So we shouldn't be seeing a discrepancy there.
So, you're two problems are likely related to:
You're probably missing some meta tags in your <head>. It looks like media queries seem to be working for you, but your scale is off. Try adding in <meta name="viewport" content="width=device-width, initial-scale=1">
Your menu styles. Do they have a set size? Is there a media query that's adjusting it?
Without seeing the menu styles, I can't really say what exactly is wrong there...
use this code for iphone 4
Screent width Between 320px to 480px
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media and (min-width : 320px) and (max-width : 480px) {
.container {
width:75%;
}
}
Else use below code for <320px widht screen
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (max-width : 320px) {
.container {
width:75%;
}
}
And your mistake is, You wrongly put min-width : 320px instead of max-width : 320px
More...
My best guess is that it's something to do with the Retina display. The viewport on your desktop measures pixels on an ordinary display. On a 4s 320 pixels are not actually full screen - instead it's 640. You should check out the device pixel ration query http://css-tricks.com/snippets/css/retina-display-media-query/
I'm trying to create a responsive design using Twitter bootstrap. Everything is going well but I cannot figure out how to set a minimum width for desktop users.
When a user is on a desktop I don't want them to be able to shrink the browser to the point where they see responsive features meant for the phone (e.g. the navbar mobile button). I would rather just have a horizontal scroll bar when the browser gets too small. How can I get this functionality without affecting the mobile layout?
You can address this with a media-query. The only problem is that you have to set a fixed width for this, min-width doesn't seem to work in this case (tested in Firefox and Chrome). If this is fine for you, you can try the following example:
// Should be something > 1024
#media only screen and (min-device-width: 1300px) {
body {
width: 1300px;
}
}
To replicate the way that logicvault.com have their site working you would need to change the Bootstrap CSS so that you only have one media query which kicks in at 480px.
Here's the media query they have set:
#media only screen and (max-width: 480px){
// styles here
}
I was able to achieve this functionality by using Frederic's advice:
// Should be something > 1024
#media only screen and (min-device-width: 1024px) {
body {
min-width: 1025px;
}
}
However, I also needed to adjust the bootstrap responsive files so the styles were only applied to touch devices. I ended up including Modernizr on my page and looking for the touch class.
E.g. change:
#media (min-width: 768px) and (max-width: 979px) {
// Styles are here
}
to:
#media (device-min-width: 768px) and (device-max-width: 979px) {
.touch {
// Styles go here
}