I have strange web layout view on iPad but at user web browser its fine. I want use modernizr as detection on custom css that i want made only for iPad.
Thanks. :)
This question is 1year old, but i stumbled across the same problem : detecting an ipad with Modernizr…
I've never seen that Modernizr adds os-ipad class… Actually to detect an iPad you have to set up custom tests, like this one for example :
Modernizr.addTest('ipad', function () {
return !!navigator.userAgent.match(/iPad/i);
});
So, i'm quite surprised to see that the previous answer was accepted as the best answer… Or maybe that option was removed from current Modernizr build ?
I realize this is an older thread - and probably already been covered in other places. However, I still managed to get here and didn't get a good answer for my needs.
What I ended up finding to work for most of my general needs is the Modernizr html class "touch". For instance on desktop, I use some "fixed" background images. Mobile devices don't like that too well, so...
in scss:
html.touch {
.element {
background-attachment: scroll;
background-size: cover;
}
}
I realize this doesn't exactly answer the OP's question targeting iPad specifically, but this will most likely help at least some people with similar issues to mine.
THIS ANSWER ISN'T VALID ANYMORE.
Modernizr has changed since I answered this question...
====================
Modernizr adds a bunch of CSS selectors to the HTML tag.
If you are using iPad, it adds the selector "os-iPad".
Therefore you can target iPad related CSS prefixing them with: html.os-iPad
html.os-iPad body
{
background-color: #FF0000;
}
You might want to use css media queries for that. Have a look at the less framework located here:
http://lessframework.com/
Related
I have a web application using angularjs and material-design.
I use md-dialog for adding and editing certain records from the database. This is responsive and works as expected on my desktop for all browsers except IE (no great surprise). This is how it is supposed to look.
However, if I run the application in safari on a Mac, or any browser on iOS (including chrome), the dialog appears to be missing the contents (has no height).
While IE doesn't have exactly the same issue, it does appear to be similar. So, I believe it is an issue with how iOS renders the flex attributes. However, I am not sure and don't know how to confirm on my iPad.
My search so far has not provided any working solutions to this issue, but I have seen others ask the same question (though not through stack).
What causes this issue?
How do I fix it for an iPad?
UPDATE
This is how the dialog is rendered in the html:
<md-dialog-content class="flex" id="dialogContent_140" flex>
<form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
...
</form>
</md-dialog-content>
If I modify the element and remove flex like this:
<md-dialog-content class="flex" id="dialogContent_140">
The body content appears as expected (at least on the MAC).
I can also modify the css in angular-material.min.css and remove -webkit-flex, -ms-flex, flex and achieve the same results.
[flex]{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
}
I can't completely kill flex for the rest of the application, but I have to allow this to work on an iPad.
I found the cause of my issues. Thanks to #Tran Khanh Nguyen for moving me in the right direction.
When the dialog was defined, someone added <md-dialog-content flex>. I removed flex and it fixed the issue on all devices.
For more information, with some special browser (e.g. IE, IOS browser...) we should consider to add the value for flex, like flex="auto" or flex="100", it will help anuglar-material would fine on these browsers.
It looks like things are set up to have just one stylesheet (default.css) for the entire application. Is there any way to have a stylesheet per view controller?
For iOS, you can use the #import tag in case you wish to organize your CSS better.
The Android version, unfortunately, is lacking this support due to a bug and I hope this will be fixed soon.
Do you have any ideas why my websites keep crashing on single post template? It is powered by Wordpress. The problem appears only on iPad (I've tested two iPad 2's).
http://luzlol.me
How do I diagnose such things? Thanks.
update: I figured out the reason.
display: -webkit-box;
crashes my iPad on single post template (like http://luzlol.me/bittorrent-sync/ this one), don't know why.
Deativate W3TC and use your dev tools console to fix your jQuery errors. Use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE.
Use the http://validator.w3.org/ to check your html and css.
It appears to be a webkit bug, nothing to do here. Thanks. I hope this one will be fixed soon.
I have an weird issue, with flexible boxes on Ipad.
I really like -box-flex futures in css3 but,
When I use -webkit-box-flex: 1 on the page, my HTML5 website is very very slow, especially I can feel it when I try to show a popup box, which already exist on the page , I just show/hide the box.
my css ex:
-webkit-box-flex: 1,
box-flex: 1
More flex boxes I use, slower Website gets, if I remove all flex and add static width and use float, everything works fine.
Does someone have this issue as well? IS it a webkit bug or something else.
Does someone have a fix or an alternative way to use flex?
I found as well this info:
http://css-tricks.com/old-flexbox-and-new-flexbox/
where they suggest to use display: flex; instead display: box; and instead
-webkit-box-flex: 1 to use -webkit-flex: 1
I have tried, and really helps when I use chrome (desktop), but Ipad safari seems like doesn't support new -webkit-flex
I really appreciate any help or suggestion what I can do in my situation.
Thanks !!
My internet was just shut off... so I'm at the library trying to fix one last feature of my test page (and eventually my site) before the portfolio review date on the 1st (TOMORROW!!!).
Here's the problem, all this time I've been testing compatibility of my site with IE9/FF4/Chrome12/Safari (latest) but NOT IE7/8. My site/test page works as I want in the browsers I've been testing with.
As luck would have it, the library I'm at has IE7 installed and apparently won't upgrade to IE8, which I think would render my page correctly. I think so due to finding many instances of issues with page renderings in IE7 while there are none in IE8 for the same page through some investigating.
Anyway, on the test page linked above, the text tab slide-out div in the top-left corner of the page isn't displaying and oddly enough, a simple image link at the bottom right of the page isn't either. Those two happen to be the first and last links on the page, if that helps at all (I'm thinking it may have something to do with that). Everything else on the test page is functioning/displaying properly. Just view the test page through any of the above browsers that I've tested with to see how it should display/function.
I've tried adjusting the z-index (as I've found a few cases where that was the culprit of the IE7 misbehaving) but to no avail. I'm stuck and don't know where to go next.
Any help/pointers would be very appreciated as this is getting reviewed tomorrow! A lot is riding on this review and I want to ensure that the reviewers can view the page as intended if they are using IE7.
Edit: CSS, JS
In your CSS, if you change your
.SU{
display:inline-block;
}
to
.SU{
display:block;
}
You can see the jaguar no problem.
Apparently, IE7 has issues with display:inline-block;
I would google "CSS differences between IE7 and IE9" and "JavaScript differences between IE7 and IE9".
Also, IE7 and IE8 do not support HTML5 markup very well (or at all). So I hope you aren't using that.
Problem with this CSS style:
.SU
{
text-indent: -9999px;
}
This is hiding the image for me when I run your test page in IE9 in compatibility mode. When I remove the text-indent style I can see the cougar image at the bottom. I seem to remember reading about this text-indent hack being a way for screen readers to read the link, but developers found it was breaking when new (IE7+) browsers were released.
When I run the page in IE9 in compatibility mode, your "Text" popout menu works fine.
IE7 inline-block trick
#id {
display: inline-block;
*zoom: 1;
*display: inline;
}
For why, search google for "hasLayout". ...oh how i love IE...
With regards to the text options, have you tried messing about with the left offset (-140px) applied to your <div class='optsdiv' > perhaps trying it set to zero [0] or even omitting the attribute entirely.
I know changing this value won't necessarily fix your issue, but it might point you in the right direction...
Bottom link seems to work on my IE7 by the way... not sure if you've perhaps fixed this issue already. my build version is 7.0.5730.13 for reference.
Good luck with the fix! IE sux ass...
IE 7 doesnt support block elements (like button) in a-tag... that was the problem here i had.