Bootstrap 3 does not support BlackBerry devices, menus won't work, links are broken. I have several sites done using bootstrap 3 and need a solution.
I would like to be able to force bootstrap to use the small[tablet] or medium[desktop] views when a Blackberry device is detected.
Is there a way that this can be done?
It seems like you may want use the black art of user agent sniffing. Check for a Blackberry browser, and then use media queries to achieve what you're looking for.
You can use media queries to solve your problem. When detecting a BlackBerry device you can create new media queries for resolutions larger than 992px to constrain the width of the .container element to the width of 750px for example (from media query up to 768px) - always assuming that you are using default bootstrap classes.
Related
Our company is addressing gaps in accessibility on the Native side of our app. We get a general diagnostic indicating lack of zooming on text on the Native app. The ticket looks like this:
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
Zooming and scaling should not be disabled.(meta[name="viewport"]).Fix the following: user-scalable on <meta> tag disables zooming on mobile devices
We use react-native-web which allows for both web and native in one codebase. Looking at the top HTML file, I don't see anything indicating user-scalable is disabled.
In order to be able to use pinch gesture to zoom in on text, do I need to go through every text component and add a prop to enable this? Don't want to use a jack hammer for a nail but we might have to if this is what's required. I would think it would be automatic.
Your ticket seems to come from an automatic test, by axe-core : https://dequeuniversity.com/rules/axe/4.4/meta-viewport
Unlike what your ticket said, it's not a WCAG 1.4.4 failure but an accessibility best practice for the web.
If you don't have user-scalable in your HTML file, maybe the automatic test did not run correctly ?
Anyway, to manually check if your mobile app is WCAG 1.4.4 compliant, you have to increase the font size to 200% in the accessibility settings of your phone.
You absolutely do NOT need to go through every text component.
The error is accurate. You have disabled some resizing capabilities in your meta tags.
Just check the head of your document for a meta tag with the attribute name="viewport". You will probably find it has an attribute of content set to either "width=device-width, user-scalable=no" or "width=device-width, user-scalable=0". Reset the content attribute to "width=device-width, initial-scale=1". You should be all set.
I need to show images downloaded from the Internet in a convenient way (number of jpgs is not fixed, it is usually between 10 and 30). I thought I could use swiping like in gallery app.
On Android I could just use ViewPager. What is Windows equivalent for this?
In earlier version I used controls:MediaViewer but it doesn't seem to be supported in Windows 10.
What is the right way to achieve what I want?
Use flip view control for displaying images in a collection. You create a DataTemplate to specify the look of the items. Further details and an example can be found at this link: https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/flipview
The col-xs-* is used to control screen with with range: 0-767px.
This appears to be too large for my site.
In my case, I need grid options for a screen width that is larger than 500px AND another with range less than 500px, and that enables me to manage iphone screen with 320px for example.
I already has the media query as an answer, but I am expecting a more elegant answer.
Customize and Download your own version of Bootstrap after modifying the media query breakpoints:
http://getbootstrap.com/customize/#media-queries-breakpoints.
Alternatively, if you have node and grunt available on your system, you can actually add more LESS variables, such as a col-xss-*, or col-xlg-*, but this would require you to modify the source code (which is available to download VIA bootstrap's website).
Long story short, there isn't a way short of modifying the underlying bootstrap code.
this is not clear to me from the documentation and from the current behavior I see in my app: The stylesheets work nice using a web browser, but not on the mobile app.
So what I was looking for is how to apply different background images in our mobile app (or at least colors) to the navigation page (top level pages list) and any other pages. We would like to apply different styles to the our current, I guess default style but don't know how to do this. So at this point I do not know what I can ask our graphics designer to provide.
Any docs that I missed or examples I can look at?
Thanks,
Vincent
The styles you are using for the web are applied by RAP's theming. Currently Tabris does not support theming. The only option you have at the moment is to use the SWT setBackground.Image methods on the widget itself. To behave different as in the web you could use RWT.getClient().getService( ClientDevice.class ).getPlatform(); to distinguish between the mobile and web client.
For plone 4.2.5 is there a non-complicated way to set up theme switching between desktop/mobile versions based on visitors screen size?
Something like "if less than 640x480 then" serve the mobile version ?
Talking about 2 non-Diazo themes for instance?
What is ++skin++ for skin switching, may it work?
I am quite new to plone and not really a programmer so a "sane" solution would be really appreciated !
Take a look in portal_css (via the Zope Management Interface) and search for "mobile." In the ""CSS Media" field, you'll find:
handheld, screen and (max-device-width: 480px)
This sets up a media query that causes browsers to use the mobile.css stylesheet if they know (admit) they are a handheld device or if they have a screen width of 480px or less. This is all done through completely standard CSS, and you may use the same principles to achieve completely different page designs for different screen widths. There are several great books on responsive design ("responsive" is the magic word). You may customize this stylesheet, or add your own media query style sheets.
You can also see a thorough and popular use of media queries and responsive design in "Twitter Bootstrap," which provides all sorts of class selectors that you may use to change designs at various screen widths. A bootstrap example is included with the newer version of plone.app.theming that is included with Plone 4.3.
Note, if you want design to change when you reduce a window size (not just the screen size), use "max-width" rather than "max-device-width."
I don't think so. However, you should look into responsive design and media queries. I suspect you can achieve what you want using standards compliant CSS in a single theme.
http://plone.org/products/collective.themeswitcher/
This is an alternative implementation you can use. From the description:
This addon has been designed to easily support new switcher. At the moment the only switcher that is implemented is the "mobile switcher" based on user agent from http://detectmobilebrowsers.com/ (python version).