I'm currently using the following code in DIVI to detect a mobile browser so that some features are turned off, by adding notonmobile to the CSS Class
#media screen and (max-width: 600px)
{
.notonmobile {display: none;}
}
However I would like to be more specific due to the resolutions of devices and some functions do not work on mobile devices, I found a jQuery here http://detectmobilebrowsers.com/
Is there a simple way to merge the 2 so that if the query is true (mobile based browser) then the notonmobile value will work in the class??
Thanks
Related
I'm using React confirm alert library for a delete confirmation but how do I make it responsive for all screens view?
For a laptop and tablet it's working fine
How do I make it responsive in mobile too?
To make a React confirm alert responsive on mobile, you will need to use media queries in your CSS to apply styles that are specific to mobile devices.
#media only screen and (max-width: 600px) {
.confirm-alert {
/* Add width or height for example */
}
}
I have a little question for all of you !
I will try to apply mobile stylesheet only if the user is on a mobile.
If the user is on desktop only the desktop's stylesheet will be apply even after resizing the window.
Here is the result I'm looking :
• enter link description here
When you resize your windows the mobile's stylesheet is not apply because you are on a desktop version
easy or not ? Help me please
Thank's a lot
you are gonna need some javascript to detect the browser, even then it's still a difficult task to accomplish 100% of the time since there's always new browsers out there, one of the most up to date librearies is bowser. https://github.com/ded/bowser
You ca use css media queries
For example
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
For example the above style will be applied only when the max-width is less than or equal to 500
I've created an app using Javascript / CSS and HTML, just a simple game, nothing special.. however, when I run the game in xcode (iphone5 simulator) it runs fine, no problems and on an actual iPhone5 device using the ad-hoc method via my Apple Dev Account, but when I try it on the iPad mini and iPad 3 the game only show's up in the top left hand corner inside a what can only be described as an iphone5 size screen. Question is, how using either JS, CSS or HTML do I tell the app (in xcode6) to resize to a device bigger than iphone5.. basically how do I tell the app to resize depending on device, I want to launch the game (hopefully!) for iphone5, 6 and all iPads of course.
I'm using xcode6 and iOS8
Many thanks in advance for any help given.
Would be happy to screenshare over Skype if this is easier to do? (Let me know)
The problem was iPhone has smaller width compare to iPad. You have develop an app for iPhone , so when u simulate it on iPad i only takes width upto 586px or 320px not all iPad width. This width can be adjusted by using media queries.
Add the following media queries with your stylesheet.
Use CSS media queries as follows
html
{
//default styles as you have used(for iPhone 5 as you said)
}
body
{
//default styles as you have used
}
.contianer(wrapper)
{
//default styles as you have used
}
//media queries for iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
/* STYLES GO HERE */
//use width upto 768px
}
//media queries for iPad mini
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* STYLES GO HERE */
}
Use proper width upto 1024px to 768px as it can match with iPad and you can get your app viewable for iPad.
Go to this Link for iphone and ipad styles.
I´m using zurb foundation to create a responsive website. When i resize my window the grid changes to the mobile mode, it´s normal behavior. Is there any way that when i resize the window the website stays put and the browser only adds a scrollbar?
I still need the mobile version to exist, for mobiles only, and i have already try to use min-width to set the point where the scrollbar is added.
Does any one have any idea how to do this?
EDITED
I have the folowing media query:
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {}
And in the html i have elements whith the folowing class:
small-block-grid-1 large-block-grid-3
In the css file change the media query to max-device-width to target devices only.
I hope this helps :)
I have been trying to redirect based on screen size generically on all desktop and hand held devices and I guess media queries is quite an answer to it because when i detected screen size with javascript screen.width then different browsers returned me different screen size which was quite irritating that why is this happening. Well I need to know two things will the following code detect the screen as javascript did or it'll detect generically 100% accurate screen size? and if so how can i trigger a rediretion javascript code if the following css rule being becomes true?
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android rules here */
}
You could use a framework like jQuery or Mootools to avoid browser inconsistencies.
I may have written something that does what you want: http://jsfiddle.net/aUW4N/