I am using Bootstrap3 css/js files to make my html page responsive for all kinds of screens (iphone, android, tablets, ipad, desktop).
It works fine on desktop and mobile devices but it's not 100% correct on iPad/Tablet. There are 2 issues with iPad/Tablet:
1. Responsive image for Tablet/iPad is still not fit to screen
2. font size of the text is small
Is it default behavior of Bootstrap3 or am I missing something?
Related
I finally have my site working the way I want it except for a bug that seems to only be with ios devices. I set the css on images on this particular page to be object-fit: contain. The picture should be displayed like this:
on Android and PC
But whenever I open the website on an iphone or an ipad I get this:
IOS
This is affecting the sites animations and really just looks very choppy because of it on iphones. I'm not sure how it could be working so well on android devices and just generally but still persist like this on IOS..I tried different browsers as well no use.
What's even more interesting is that on initial load you will see the incorrect css applied on the image, but after refreshing the page it loads the image with the correct dimensions. I'll appreciate any insight I can get regarding this issue.
Feel free to check out the repository: https://github.com/physicalrobot/vikalpaWebsite
And see the bug for yourself on an iphone or ipad at www.vikalpa.xyz/projects
I tried changing the css of the images to force them all to have a width: 100% and a height: auto.
I tried changing object-fit to anything else in the browser while using web-inspector on the ipad, but still couldn't get it to change.
I've been wrestling with this for a few hours now. Here's the repro scenario (Xamarin.iOS 8.10, iOS 8.2):
Created a (mostly) empty test web page (no stylesheet, just a width=100% on the body) with the following tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Page loaded in both a UIWebView and WKWebView (preferred) in a thin-client app designed for portrait mode on iPhone
Debug via iOS Simulator, attach to WebView instance in Safari on parent Mac
Viewport width always shows 320px when simulating both iPhone 6 and 6+, making the web page appear scaled too large
Same page loaded and debugged via mobile Safari
Viewport width shows 414px (6+) and 375px (6), as expected
I've experimented with SizeToFit() and ScalesPagesToFit on the WebViews and AutoresizingMask on the parent ViewController, but they don't seem to have any effect on the reported viewport size.
Does anyone have any idea why the WebViews have the wrong viewport dimensions? This is the prescribed approach everywhere I look. Is it an iOS issue, a Xamarin issue, or something I'm missing or potentially not doing correctly in code?
It turns out that the necessary launch images for the higher-res iPhones were present but not properly included in the iOS project, causing the app to load at the lower resolution of previous iPhones. Once Default-667h#2x.png and Default-736h#3x.png files were referenced, the app loaded as expected. Leave it to Apple to make their app runtime resolutions dependent upon something like the presence or absence of particular image files!
Use a storyboard for iOS9+. Less hassle having to deal with all those images too.
https://developer.xamarin.com/guides/ios/application_fundamentals/working_with_images/launch-screens/
NOTE: The information in this section is provided for historical reference only. Starting with iOS 9, Launch Screens should be created with Storyboards instead of including specific Image Asset Launch Screens for all of the different iOS Device types. Please see the Managing Launch Screens with Storyboards section below for details.
I have a website optimized as a web app with iOS safari, so that adding to home screen opens the app in a separate Webview. However, it always opens in the 3.5" letter boxed mode, instead of stretching to fill the screen. I know that with native apps, you just have to add the iPhone 5 sized launch image. How can I do this for a web app?
I found on this post that all that is required is that you remove width=device-width from the viewport meta tag. The blog talks about specifying a startup image, but this appears to be optional.
Edit: Original source of answer is Max Firtman. He indicates it may be a bug as well (see comments), but for now, this solution works.
I'm having a strange issue where if I view my website on a desktop computer the icons that come with a theme-roller zip file show up just fine but when the website is viewed on a mobile device (so far I've only tested an android device using both chrome and the built in browser and an ipod touch) the icons refuse to show. I just get an empty circle where the icon should be. The icons image files are in a folder called 'images' that is in the same directory as css file so I don't think it's a pathing issue. Just to be clear, it happens everywhere that jquery mobile should be showing an icon, not in just one or two places. For instance with a collapsible list, jquery mobile is supposed to show a plus icon when the section is collapsed and a minus icon when it's expanded etc.
Please help!
Thanks
EDIT:
So I took it upon myself to set up remote debugging in Chrome on my mobile device and it appears that the problem is that for some reason, only on mobile devices, the css or js is telling the browser to use the white icon set as opposed to the black icon set. The white icons don't seem to be appearing because they are on a white background. Anyone have any idea why on a desktop browser it would use one color of icons and on a mobile browser it would use another?
in the css, just change
background-image: url(./images/icons-36-white.png);
by
background-image: url(./images/icons-36-black.png);
In the HD/"retina" sprite section (around line 485 in lmy theme, not sure it is the same for everyone).
This is an extjs single-page application which works fine in FF, IE, and Safari.
There are several problems with viewing or using this extjs app in the iphone. The extjs panels/windows do not resize, as it would in a normal screen. When the user zooms out, the expanding viewing area is blanked out. An example image is below:
Iphone does not recognize the combo box of the extjs.
Unable to scroll down.
Viewport Issue:
The main issue is with the viewport. It does not scroll or zoom properly in Iphone.
Ext JS is not (and will likely not be) optimized for mobile devices. That's the purpose for Sencha Touch, which is the mobile framework built on Ext JS and specifically intended for iPhone and Android. I doubt you're going to have much luck resolving these types of issues using standard Ext JS.
We have experienced the same kind of problem with ExtJS and iPhones, and a slightly different, yet comparable, problem with android devices. I guess that those browsers report the screen size in a way that confuses ExtJS, so the layout mechanisms do not work. Since Sencha Touch has a similar API like ExtJS, making a Sencha Touch version of your software is probably the smartest way to make it work properly on iDevices and Androids.
Rather than using viewport, I used a column layout panel container. Most of the extjs stuff works fine. I placed this container layout into a div and specified its height and width. Also, <meta name="viewport" content="height=700" />.