So, well, we have an XPage application which works very well on all the browsers including the internal notes browser. Since, our target audience is both the desktop/mobile users we have designed a responsive layout using css media queries which works well on browsers, however, we just found out that when it runs as a notes application, it doesn't respect the media queries. It works as if there were no media queries (For eg. even the mobile specific items are shown on desktop). Any suggestions here to get it working? We are far way through and removing media queries would be kind of a last alternative.
Any help would be really appreciated. Thanks!
I think the reason is that your Notes browser is rendering as IE. IE doesn't support media queries up through IE 8.
IE is the default, try changing the internal browser to Firefox. See this link for instructions.
http://www-01.ibm.com/support/docview.wss?uid=swg21268588
Related
I have CSS that isn't working on any browsers on my smartphone (Galaxy S7 with Oreo). This is an example line of the code;
div[data-quickedit-field-id="node/859/body/en/full"] th{background-color: #81CFD6;}
Here's some background; this site has other code that works on my phone, this code works on desktop, I've checked the W3C Schools website and the Mozilla Developer website (as well as a few others) and I haven't been able to find any information on this, so I'm wondering if there's any reason the data attributes wouldn't work on smartphones.
Only use quickedit for users that have access to in-place editing else when a testbot checks as an anonymous user it generates an error. Try to avoid the code unless it is necessary.
Attribute selectors should work in all the modern mobile browsers. Checked that with your attribute and value and it is working good in my mobile (I've checked in Motorolla One Power and Redmi Note 7 Pro using chrome browser).
Here is the link to check in mobile: http://naasu.me/su-fixes/css/are-css-data-attributes-available-on-mobile-browsers/
If this is still not working for you, try using contains selector by adding * with the attribute([attribute*=value]).
Hi I am tring to make a responsive page using media Query and i want it to be worked in IE7 and IE8
Can anyone please help on this issue.
thanks in advance
Your best bet will probably be using a JS library. Respond.js (https://github.com/scottjehl/Respond) is a great solution for media queries for IE8 and lower. One word of caution: its written pretty narrowly (only has support for min-width and max-width queries) but should have enough for the basics.
I have a mobile website that is styled with extensive use of CSS3 Media Queries.
I want to do a version for browsers that don't support Media Queries by adding an extra css file for them, that overwrites some of the css rules.
I was wondering if there is a way to disable Media Queries support in Firefox (21.0) to be able to develop, since I don't have anything else to test with.
A Chrome solution would also work out, although I prefer using firebug.
You could always try testing in IE 8.
Media queries is something you define in your CSS, if a browser does not understand media queries, it has no support for it, it will not execute the CSS that makes the site responsive.
As a result you will have a not responsive site in a browsers that not supports media queries, thats the whole point of media queries.
There is no option in any browser to disable media queries.
If you want to test your site without the media queries kicking in, comment out the rules in your CSS. With this approach you can continue testing in Firefox, without having the need to test in Internet explorer 8
You have it backwards. Media Queries and corresponding rules are implicitly ignored by browsers which do not support them. The common/basic rules must therefore come before the specialized ones, not vice-versa.
You should always test in the target environments. If that is not an option, you can put the media-specific rules in a separate stylesheet and disable that stylesheet, for example with HTML comments or the Web Developer extension (apparently this feature of the extension is not available in Chromium/Chrome, but you can disable "Handheld Styles"). Equally with Web Developer and Chrome Dev Tools you can test media-specific stylesheets as if you were using the corresponding viewports. But do not rely on that; there is more to it than just viewport size.
If I base my CSS on mobile styling, then use #media queries for gradually larger displays (tablets, desktops etc), will the mobile devices use the desktop styles?
I believe that typically, mobile devices will load all images even if they don't apply to its own particular media size. Meaning it will load all images and hide ones not matching its query-based stylesheet.
What I am trying to do is use one background for the larger version of the site:
.splash {
background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}
and another for the mobile version:
.splash {
background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}
If I apply the mobile CSS before any media queries, and add the large media CSS below using a query like #media screen and (min-device-width: 481px) {...}, will mobile devices load the large image too?
Behaviour is browser depended but iOS Safari and Android Chrome will respect the media queries and only download the background images for the applicable media queries.
If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.
If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later.
One thing to watch out for is display:none on content images as it won't prevent download in many situations. Tim Kadlec explores this more here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Tim Kadlec has put together some awesome research for this – Media Query & Asset Downloading Results
Your specific question is answered in Test #4 – results are spotty. Better to have media queries for both your images.
This sounds like it would be largely browser dependant, but I'd imagine any mobile browser worth its salt would try to cut down on data usage by not loading images (and possibly not loading entire stylesheets) that are marked as not for it. Furthermore many mobile browsers prefer to not be recognized as mobile browsers. I know I hate it when I pop open a site on my iPad and a mobile-stylesheet forces me to view a skinny sliver of single column site on my 9.7" screen.
So media queries are unreliable, but still worthwhile (they really don't hurt anything, so long as they're used responsibly), and that doesn't help what is a fairly obtuse (but still good) question; time to do some testing!
Most modern desktop browsers come packaged with developer tools. My current favorite is FireFox's dark and pretty web inspector (the 3D view is especially to die for). But what about on Mobile? The largest parts of your mobile audience will not be on browsers that come with developement tools.
Well, you have a couple options:
Firebug Lite has some mixed results on mobile browsers, but is
an excelent choice in most cases where other inspectors are
unavailable. It does seem to work in iOS and other mobile
browsers with HTML5 support, though.
This question suggests using something called "weinre". I've never used it, but it looks legit enough.
If you're okay with targetting just a few certain browsers, many DO include developer tools. Such as Google Chrome for Android!
Whatever you choose, you'll be looking for an asset viewer of some sort; perhaps a timeline view. Any sort of tool that will allow you to see what the page loaded, in what order it loaded it, and how long it took to load.
Good luck!
Is there is any difference in writing html and css for mobile from web??
The way HTML and CSS is interpreted is completely in the realm of the web browser. Standards have been established, and most major browsers attempt to adhere to these standards these days.
As long as the mobile platform has a browser that implements CSS and HTML in a standard way, then no, there's no difference in writing HTML and CSS for a mobile device.
How you want your web page to look on such a device might be completely different however, and you might need to write a second set of HTML/CSS to present the same data to a mobile browser.
If you enjoyed (sarcasm) the diversity of web browsers, you're going to love mobile phones, browsers and carriers.
PPK got paid by Verizon Germany to do some tests so he got to play with the whole set of phones sold by the carrier and it gave theses posts and tables.
Just horrible.
Yes. There's a difference in CSS for each different browser you're targeting!
It really depends a lot on how modern the mobile devices are, or at least the ones that you are supporting. iPhone, for example, behaves nearly identically to desktop Safari (except the notable absence of Flash). But middle-of-the-line phones from 3+ years ago barely support text-only browsing.
As others have mentioned, the level of CSS support among mobile devices varies even more than on the desktop. What others have not mentioned, however, is a fairly major annoyance that mobile developers need to be aware of: dual CSS media types.
Some (many?) mobile browsers advertise acceptance of both screen and handheld media types. This means that serving a handheld stylesheet is not enough, because the device will also apply the rules from the screen stylesheet.
To overcome this, it is sometimes sufficient to explicitly set rules in your handheld stylesheet for things you would have otherwise omitted. In some cases, it may be necessary to flag certain rules as important.
Other than that, stick to single column layout, go easy on the images, and everything should be fine. And I hope you're not relying on JavaScript, because some mobile browsers don't support it.