I'm building a website, which will be used on an iPad. The problem is, that I need to have 2 stylesheets:
One for when the user will see in fullscreen mode (without the address bar) and one for when the site opens standard in Safari.
Is it possible to make a line like:
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {}
but when it is in fullscreen contra not?
In iOS 5 you should be able to target the size of the screen without the menu bar (which takes up exactly 18px), this way you'll know it's fullscreen, because it should be larger since the menu bar won't be there:
#media only screen and (min-device-width: 672px) and (max-device-width: 1024px) and (orientation:portrait) {}
I'm not 100% if that'll work, but I know the black bar at the top takes up 18px. And the dimensions would be as such:
landscape:1024x672
portrait: 768x928
Update
I've found out how we can do this with jQuery, it relies on window.navigator.standalone
$(document).ready(function(){
if (("standalone" in window.navigator) && !window.navigator.standalone) {
$('head').append("<link href='fullscreen.css' type='text/css' rel='stylesheet' />")
}
});
Now this assumes that mobile safari supports window.navigator.standalone and it should. Give it a try.
the media query you mentioned, works according to the screen width, that's the device screen dimensions (width), without taking into account whether its Safari or fullscreen(like u described w/o address bar). hope it makes sense.
I did a quick search, and found link. Hope it helps.
Related
The iPad Pro is in a width that crosses into desktop widths - 1366px. There are a lot of smaller laptops now that fit the same width as the iPad Pro (the 11 and 13 inch laptops).
On the iPad Pro, I want to show things like a hamburger menu, but on the desktops, I want navigation with mouseovers.
Before the iPad Pro, I could make the cutoff be 1024 px wide, but now there's cross-over.
I need both a media query that includes it (so it shows the mobile landscape view) and one that excludes it (so desktops show only when not ipad Pro).
I think this one includes it properly:
<!-- Put on multiple lines for readability -->
<link rel="stylesheet" media="only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1.5)"
href="/css/desktop.css" />
But I can't figure out how to make a desktop media query that will exclude the iPad Pro and include all desktops from 1024px and larger. Is this possible? What would it be?
That's a good attempt, but you can't be sure if you don't test it on those devices. I think most reliable way to do this is using script like the one on https://stackoverflow.com/a/4617648/1729641
You can for example add a class to body with JavaScript:
document.body.className += (navigator.userAgent.match(/iPad/i) != null) ? ' ipad' : '';
If you use JQuery:
if (navigator.userAgent.match(/iPad/i) != null) {
$(body).addClass('ipad');
}
If your goal is to avoid downloading this style on another device, you can load it with AJAX. It's unpure, I know.
My site(www.acweb.com.cy) is having a problem showing the navbar on the top right of the screen. When its resized on at the width of 768px its displaying both the "js-fh5co-nav-toggle fh5co-nav-toggle" and the regular navigation bar which is the horizontal for the bigger screens. So when its open on my small ipad is showing both the navbars.
Second off all i dont know much of sass and am using the koala program to edit the templates scss files. Additionally i removed all _(underscore) from the scss filenames cause koala wouldnt read the files. At last when am loading the site and opening the developer inspector within firefox the navbar is read as _navbar.scss instead of navbar.scss as i renamed it.
Thanks for the help!!
Your responsive media query codes are colliding at some places, you need to correct that. That's the reason both navbar are visible from 768px to 765px.
This is what your max-width and min-width are at present as below,
#media screen and (min-width: 768px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
You need to either increase or decrease any one of there width. You can make changes as below,
#media screen and (min-width: 769px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
So when its open on my small ipad is showing both the navbars.
iPads have a different pixel density than your normal computer monitor, this may be confusing when using css media queries and might even fool your css into thinking it's in a totally different media query.
I suggest checking out this site to get an idea of why your iPad is showing such a different website than your desktop/laptop:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
For more information about pixel density and specifically Apple's Retina display, this is where you need to be: https://en.wikipedia.org/wiki/Retina_Display
Quick workaround (not the best possible solution)
At the bottom of your main.js file, add this line after all the other methods:
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
So that your function will be:
// Document on load.
$(function(){
parallax();
burgerMenu();
clickMenu();
windowScroll();
navigationSection();
goToTop();
// Animations
homeAnimate();
introAnimate();
workAnimate();
testimonialAnimate();
servicesAnimate();
aboutAnimate();
countersAnimate();
contactAnimate();
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
});
This will remove the general class when both of them are used for the navigation.
I'm using Windows 10, Codeigniter, jQuery and Firefox 43.0.4 although I can't see why that would affect this issue. I want to apply styles to an iPad size window so I'm using this media query:
#media only screen
and (min-device-width: 768px)
and (max-width: 1024px)
{
*{color:#ff0000 !important;}
}
as a test that should turn all text red but it's not working in Firefox 43.0.4 (or Chrome etc). I'm also using the Web Developer extension to set the portal to the correct size. I've used the head section metatag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Probably obvious but I can't see it and I've used media queries before. This is driving me nuts and I would be grateful for any suggestions as to where I'm going wrong.
I believe you are missing the device prefix, the CSS should be:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
You can read more information on Stephen Gilbert's site.
You dont have to use min-device-width, just use min-width
#media screen and (min-width:768px) and (max-width:1024px) {}
Try something like this:
#media only screen
and (max-width: 480px),(min-device-width: 768px)
and (max-device-width: 1024px)
I appear to have fixed the problem by using Mathew Riches code above and the reason I didn't recognize this earlier is that, for me, it doesn't work in a resized firefox browser window which has been my testbed of choice. To use the resized browser I need to use:
#media only screen
and (min-width : 768px)
and (max-width : 1024px) { /* STYLES GO HERE */}
but that doesn't work on my iPad 4. And inciddentally any use of:
and (-webkit-min-device-pixel-ratio: 2)
with a pixel ratio of 1 or 2 killed the response on my iPad 4.
So the only way to test has been to upload every change in CSS and check on the iPad itself which is pretty irritating as I normally use my local server for all development.
I then discovered a problem with full-screen background images on the iPad but that is another story...
Many thanks to all contributors for your thoughts and for my purposes I now regard this query as solved.
I have used the media queries for different width.I have used 3 Style sheets for mobile, tab and desktop views as follows:-
For Mobile View:-
#media only screen and (min-width : 120px) and (max-width : 640px) { }
For Tab View:-
#media only screen and (min-width : 640px)and (max-width : 980px){ }
For Desktop View:-
#media only screen and (min-width : 980px) { }
When I am re sizing my browser then it is showing the adaptive view but while checking in mobile device the web page is still showing the browser view.
The responsive view is also not adaptive while checking in the Device Emulator functionality of the google chrome browser.
However the side menu bar used for mobile view is still visible in the mobile view as expected but the remaining site is not adapting the width and height accordingly.
Can anyone explain the issue and reason behind it.
P.S. : I am restricted to media queries not able to use Bootstrap or any other framework for making my site responsive.
Here we go. As per your media queries, browser is not sure what layout should be adapted because you have defined the same width as break point.
What you need to do is define media queries like this.
For Mobile View:-
#media only screen and (min-width : 120px) and (max-width : 639px) { }
For Tab View:-
#media only screen and (min-width : 640px)and (max-width : 979px){ }
For Desktop View:-
#media only screen and (min-width : 980px) { }
Hope this help you.! Do come back if still having issue.!
Try to remove only screen and and leave it like #media (min-width : ...
these attributes is not required.
If it works but you really want to use screen and just remove the only keyword. From specs:
The keyword ‘only’ can also be used to hide style sheets from older
user agents. User agents must process media queries starting with
‘only’ as if the ‘only’ keyword was not present.
If at least something from #media section is working for your mobile device make sure that ALL your #media sections placed at the bottom of your CSS file and that this file are linked to you html the latest among all other CSS files. If it still doesn't work for you as expected check your actual CSS code or make a demo for us. How to make Minimal, Complete, and Verifiable example
PS.: You don't have to specify min-width for the smallest screen in the list of #media
I recently asked a question about resolution and how I can fix it in my ASP.NET web application.
With some of the answers I got I found that media queries was a good place to go.
I have set up my CSS document like the following:
#media only screen and (max-width: 640px) {
}
#media only screen and (min-width: 641px) and (max-width: 800px) {
}
#media only screen and (min-width: 801px) and (max-width: 1024px) {
}
#media only screen and (min-width: 1025px) {
}
I have been developing in 1600x800 and I am wondering how do I know what I need to change the sizes of the object to. Do I have to develop the application again in a smaller browser or is there an easier way to go.
HTML:
<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>
The approach is basically the same as when you are writing CSS without using media queries. You still have to deal with different window sizes.
Drag the window edge to make the browser smaller
Look at how the design holds up
Adjust the CSS
Refresh the page
You will need to change the sizes of your images and fonts and also change their positions based on the different screen sizes which you have set using the media queries. To check the different code you can resize your window and drag the border and see the effect if its working or not.
And also follow the steps which **#Quentin** has written it will help
this is not exactly the right approach to follow. you should start your website with a fluid css layout grid, google it a choose one that suits you. this is an example of a fluid grid: http://onepcssgrid.mattimling.com/.
When you set up everything and designed, stretch your browser and when the design "breaks", add a media query breakpoint. deciding your breakpoints before the development is not a good idea.
a good tool to test your design may be: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random (enter your url in the top left box) but i usually prefer stretching my browser manually.
This is what I have done in my website and it is working fine:
<head>
<meta name="viewport" content="width=device-width">
<style>
#media screen and (max-width:1900px)
{
#content{
margin-left:251px;
margin-top: -197px;
}
}
#media screen and (min-width: 420px) and (max-width: 1000px) {
#sidebar {
margin-left: -30px;
}
#content{
margin-left:221px;
margin-top: -197px;
}
#separator
{
height: 50px;
}
}
</style>
</head>
I checked it by resizing my chrome window and then applied width accordingly. Hope it can help you.
CSS Media query are the best option to solve issue related to working with different size of browser and devices. you can check your application with different tools available that shows how your application look on different device and browser.
You can check by re-sizing your browser window or you can use browser extension to check your work
Google Chrome:
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
FireFox:
https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
Opera:
https://addons.opera.com/en/extensions/details/responsive-web-design-tester/?display=en
Safari:
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html
To learn more about css media queries visit: http://letsdopractice.com/css-media-queries/