As the title says. Here is the URL if you have an iPad - How can I remove the responsive width of the Comments Plugin for iPads? (bottom of page) http://dev.assessmentday.co.uk/aptitudetests_numerical.htm
I ran into this too. I've worked around it by manually adding the data-mobile attribute set to false if I detect this is on an iPad:
<script>
if (navigator.userAgent.match(/\biPad\b/)) {
document.querySelector('div.fb-comments')
.setAttribute('data-mobile', 'false');
}
</script>
This could be improved to handle other tablets as well, but the best way to do that depends on how Facebook auto-detects "mobile", which I'm not sure of. Perhaps based on display width, perhaps based on the presence of touch event handlers, or perhaps indeed by user-agent on the server-side.
Related
I have an image gallery, the images are large enough to fill an iPhone screen.
The images are also links, so as you can imagine, scrolling becomes quite frustrating on the iPhone because you're constantly clicking links by accident.
Is there anyway to prevent this using css alone?
If not then what would be the most simple solution to this problem?
Thanks!
I would suggest to use the Javascript. However, I found a way using only CSS. First step, you will need to identify the client browser, just add the code below in your HEAD session in HTML file:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
Only if client is using a browser in iphone, the content of "iphone.css" will be loaded.
In this file "iphone.css", you need create a class to disable the links:
.disableLink {
pointer-events: none;
cursor: default;
}
In your HTML code of gallery, add the references in your links:
IMAGE
These steps works only in iPhone/iPod touch, but if you look in my second reference, you will see the way to adapt for iPhone 4/iPod touch 4G:
I don’t think there’s a CSS-based solution (CSS isn’t really designed to change the behaviour of HTML elements).
You could use JavaScript on page load to check the width of the browser’s viewport, and then find and disable/remove the links if the viewport is phone-sized.
See PPK’s ‘A Tale of Two Viewports’ article to figure out which JavaScript properties to check to figure out the width in your situation (I haven’t done enough mobile development to remember off the top of my head).
I like the idea of pointer-events: none;, but I wouldn't use it because it isn't well-supported.
If we're defining a mobile device as just having a certain screen size, I would do something like this:
$(function () {
var mobile = ($(window).width() < 481);
$('#image-gallery').find('a').click(function (e) {
if (mobile)
e.preventDefault();
});
});
However, I would try to define 'mobile' as something else, e.g., a browser that supports touch events.
This has surely been covered countless times, but I cannot find a working solution.
how do you get rid of the scrollbars in a Facebook iframe app in Chrome. Both IE & Firefox are fine.
Using the suggested CSS overflow:hidden, simply cuts off the content if its over 800px in height.
Even the Facebook Coca Cola iframe app has the content cut off!! see here
http://www.facebook.com/cocacola?sk=app_161193133389
this is what is also happening to my app in Chrome (v. 16.0.912.77 m)
add this to your canvas app's fb js:
FB.Canvas.setSize({ width: 520, height: X });
where X is the height you want.
If your app is fluid use:
FB.Canvas.setAutoGrow();
i had a similar issue: after adding FB JS SDK and
FB.Canvas.setAutoGrow();
i had to set
body{}
in css to keep the scroll bars from showing in chrome. In my case is was padding.
body{
overflow: hidden;
margin: 0px;
padding: 0px;
}
I would also try to set the size with a delay and experiment with it a little:
window.setTimeout("FB.Canvas.setSize({ width: 520, height: 1111 })", 2000);
Also don't forget to initialize Facebook with your app id ( FB.init ) before calling FB.Canvas.setSize or FB.Canvas.setAutoGrow.
You have to make a few tweaks to you app. First, add the following code to your page:
FB.Canvas.setAutoGrow(); to tell the Facebook SDK to resize the iframe if the contents is longer.
Add overflow: hidden to the <html> or <body> CSS
Check your app settings and make sure you have set the Canvas Width to 'fluid' and Canvas Height to 'fixed' (Go to Settings > Advanced > Scroll to Canvas Settings.)
All of these things should fix the scroll bars. If it doesn't, using something like "Inspect Element" in Chrome to see if something is causing the bars to appear.
There are various solutions you could try below. Please comment as to which one, or if none of them work and I will update this answer accordingly.
If you haven't already, try adding: body{overflow:hidden;}
You may also have javascript disabled.
Alternatively, you could set the fixed height for the app very high in the app settings, where it says: fixed[ ]. Also make sure that fixed is selected on your app settings.
If this happens on other apps, including that CocaCola page you mentioned, then it could possibly be the browser. Try updating. I use the Chrome 19.0.1084.56 and I have no problems, (except for me the height is always pushed to a 1200px maximum height).
Also look here: 'Choosing between Facebook iframe scrollbar or page cut off halfway' where there is a solution that you can try.
Edit: Also look here: 'Timeline page app height stuck at 800px'.
Edit: After some looking through the Facebook bug area, Facebook say this is not a bug on Facebook's end, therefore must be a problem in your code. (Source: 'https://developers.facebook.com/bugs/360687100649759')
If that doesn't work, then comment and say so and I will do some further research.
So I've been doing phonegap development for a while and have made a couple apps in the app store. I have made iphone and ipad apps and make them completely separate. I know apple allows for the submission of a single app that can be formatted for both devices, my question is how is this done with phonegap? I know I can edit the project settings and select ipad/iphone for the target device. But what do I do in my code to get it to work correctly?
Since it's html, I control sizing in html (and jquery). For example in my iphone app, I might have:
<img src="asdf.jpg" width="480">
And then that same ipad app would be:
<img src="asdf.jpg" width="1024">
It would be really awesome if I can just have two html files in my www folder, say, index.html and index-ipad.html, and then they share common img, css, and js folders. Is this possible?
I've checked the docs on phonegap extensively and couldn't find anything. Can somebody point me to a tutorial to do this? I really hate having multiple apps in the app store for the same content.
EDIT PER COMMENT BELOW
Maybe I wouldn't use the width attribute in html, maybe I would do this:
<img src="asdf_ipad.jpg">
and:
<img src="asdf_iphone.jpg">
where the two images have been sized for the two devices. In any event, I can handle the html/js/css, I just need to know how to implement a "switch" such that the ipad renders different from the iphone.
You can specify what file PhoneGap opens initially. Have a look at application:didFinishLaunchingWithOptions from AppDelegate.m
Do something like this to open a different index page for iPad:
if ([[[UIDevice currentDevice] model] containsString:#"iPad"]) {
...
self.viewController = [[[MainViewController alloc] init] autorelease];
self.viewController.wwwFolderName = #"www-ipad";
self.viewController.startPage = #"index.html";
...
}
why not use CSS media queries to identify your target device and update the images as appropriate? JqueryMobile for example does this to provide high-resolution icons to Retina devices...
Here's an article on how to use those to apply different stylesheets to iPhone vs iPad.
Hope this helps!
One option:
<img src="asdf.png" class="asdf"/>
.ipad .asdf {
width: 1024px;
}
.iphone .asdf {
width: 480px;
}
$(function() {
var deviceType = (device.platform=='iPhone' && screen.width==768) ? 'ipad' : 'iphone';
$('body').addClass(deviceType);
});
Note the deviceType logic is pretty simple (i.e. iPad locked in portrait), you will need to expand the logic to handle orientations and potentially add even further logic to detect Retina devices and in the future higher resolution iPads.
Well, I found a solution, I just use javascript to forward the page to my other html page like this:
if(screen.width==768)
window.location='index-ipad.html';
So I just have that code in my index.html file, and then, of course, I have a different index-ipad.html file. This gives me the freedom to do whatever I want and not limit me to just minor style changes. Note, this didn't work inside the jquery onload stuff $(function() {}); go figure.
I would have preferred to solve this with a "server side" approach, meaning the objective c layer that this resides upon. But, unfortunately, my skills in objective c aren't quite up to par. If anybody can give me that solution, I would greatly appreciate it!
I am trying to trouble shoot a css issue that is appearing only in iphone browsers. I simply need to detect if the user is using an iphone, and if so, render a modified version of the div that is being affected.
I am happy to just call this modified version of the css div in the header as it will save having a second style sheet.
You used to be able to do it between browsers. It was especially good when rendering a IE6 fix.
Thanks for your help in advanced.
James
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
// do something
}
OK, I'm having some issues with my site's mobile stylesheet on the iphone. I reworked the stylesheet to be similar to what http://m.facebook.com give the browser, only I'm getting an issue where the Safari on iPhone browser is still zooming the page out from like 960px, instead of constraining it to the native screen resolution. What gives?
Do you think it has to do with my .container960 class on the body element? I tried reseting those styles with the mobile stylesheet, but maybe it's not reseting the container styles properly.
The site is http://beta.cureinternational.org. You'll need to use username Guest and password guest to view the page.
Have you tried adding a meta-tag like this?
<meta name = "viewport" content = "width = device-width">
Or hard-coding in the dimensions yourself (see Viewport in https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)