This question already has answers here:
Seeing black bars at the top and bottom of the iPhone X Simulator
(11 answers)
Closed 5 years ago.
Today I've installed Xcode 9 and build my app for iPhone x. but the upper and bottom area showing black like the scenarios we met couple of years ago for iPhone 5 when screen switched to 3.5 to 4.
How simply we can fix this problem?
You should use a safe area.
For apps with custom layouts, supporting iPhone X should also be
relatively easy, especially if your app uses Auto Layout and adheres
to safe area and margin layout guides.
Read more: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
I am also same issue. I used safe area Layout also. But above solution not support for me . I got solution from below link.
https://www.bignerdranch.com/blog/get-your-apps-ready-for-iphone-x/
This below point helped for me to resolve that solution.
Ensure your app uses a Launch Screen storyboard (not Launch images).
Related
Sections of my site look a little different on Chrome Dev Tools simulating an iPhone 12 than an actual iPhone 12. Why is this? I've signed up for browserstack. Do you guys think they produce an accurate representation of a site on different devices? Do you recommend any others?
This is the site (iPhone 12) on Chrome Dev: https://snipboard.io/OpU8aj.jpg
Same site on my iPhone 12: https://snipboard.io/vl6b8f.jpg
Notice the type in relation to the red background?
I'm wondering too... This is the first time I've used %'s for my padding and margins. I usually use em, rem or px. Could using percentages have something to do with it? I do understand the the percentage is based on the parent element. But still... not sure if that has anything to do with it.
Thank you
I was having the same issue. I learned, and I'm sure most of you know this, any iPhone above an iPhone 8, that Apple's documented viewport size is not the actual pixel size (w x h) that displays a website or app. I discovered this after researching Apple dev docs. There is now a "safe area" leaving room for native device buttons on the top and bottom in portrait mode, or both sides in landscape mode. You subtract the area for these buttons from the manufactures documented viewport size to get the real displayed viewport or "safe area". Of course it will be different for every device.
I hope i'm not breaking any rules with the following. I used "what is my viewport" https://whatismyviewport.com/ Pull up this url in any device and it will show the actual width by height in px, of that device. This is the actual size your website or app will be displayed at.
I am now able to set new media queries using the above info instead of media queries based on the device manufacturer's documented viewport size. This solved the issues I was having.
So, I started making this app a while ago, and it is now finished, excluding the question I wanna ask. How do I make an app suitable for all sizes? I used the following 3 tools- VS Studio, Expo, React-Native. I have built an app suitable for my screen size; But when I tested it on IOS (with different dimensions), Android (with different dimensions), everything is messy. That is understandable as I simply put numbers in margins, paddings, widths, heights, etc. How do I make this app auto-adjust to all screen sizes? Please Help. This is my first time making a React-Native app.
You should check each and every screen during the app development with React Native on each platforms (Android and iOS) because it saves your time. Also you should take care of some of the things at the start of new app development. Like responsive layout, internet connection check, portrait and landscape view, etc…
Here is the way to make an app suitable for all screen sizes and dimentions.
You can use “react-native-responsive-screen” package to use fully responsive UI elements. Below is the link of that package.
https://www.npmjs.com/package/react-native-responsive-screen
Also here is the link which will help you to understand, how to use it.
https://medium.com/react-native-training/build-responsive-react-native-views-for-any-device-and-support-orientation-change-1c8beba5bc23
You can see the example code in below link using expo.
https://snack.expo.io/#ahmedmkamal/react-native-responsive-screen
Thanks.
This question already has answers here:
HTML5 inline video on iPhone vs iPad/Browser
(8 answers)
Closed 6 years ago.
Mobile Safari on the iPhone does not allow videos to play inline, they must always go fullscreen. Is there any way to play html5 video inline?
This is interesting. Why would apple imply limitations to development?
Came across this:
Source: http://blog.millermedeiros.com/unsolved-html5-video-issues-on-ios/
No way to play video inline on the iPhone
Videos always plays full-screen on the iPhone (as of iOS 4.2), I’m “sure” that it isn’t a technical issue since iAds can play inline videos without any problems and the iAd is simply an embedded UIWebView. – it seems that Apple doesn’t want webapps to succeed since they don’t pay 30% of the sales to them – And don’t say that it is because the user won’t have enough available screen area to watch the video, that it is for a “better experience”, that it “saves battery”.. it is all nonsense, the browser UI don’t need to be so obstructive and in some specific cases it is totally fine to have the video playing on a small area, they are “doing it on purpose” just to push users to the app-based browsing (which they control and profit with).
This question already has answers here:
How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]
(6 answers)
Closed 8 years ago.
I would like to disable my bootstrap 3.0 theme for md, sm responsiveness, I just want it to look different when it is viewed by a cellphone.
The answers I read in the linked question are for disabling the responsiveness completely for everything, I just want to disable responsiveness for tablets, I want to keep the responsiveness for cellphones.
Is there a way to do this?
I do not know less, can I do it from the css file directly?
My website is already built, works fine in desktop but when I resize the browser window, lots of things get out of place, it works well on the cellphone.
Please see here: http://getbootstrap.com/examples/non-responsive/
Steps to disable page responsiveness
Omit the viewport mentioned in the CSS docs
Override the width on the .container for each grid tier with a
single width, for example width: 970px !important; Be sure that this comes after
the default Bootstrap CSS. You can optionally avoid the
!important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding
behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place
of, the medium/large ones. Don't worry, the extra-small device
grid scales to all resolutions.
You'll still need Respond.js for IE8 (since our media queries are
still there and need to be processed). This disables the "mobile
site" aspects of Bootstrap.
I was playing with adaptative CSS by changing my Google Chrome window size when I noticed that the Twitter Bootstrap page seems to "make google chrome fail" on certain occasions.
Steps to reproduce (from a desktop computer):
Start with a blank Google Chrome tab, full screen
Visit http://twitter.github.com/bootstrap/
Gradually make the window narrower, letting go the mouse every 100 pixels or so.
Keep going until you get the "totally mobile version", at around 400px (The blue "View project on github" button is on top of the white "Download Bootstrap" button, and they are both full-width).
Now make the window thick again, letting the mouse go after every 20 pixels or so.
Chances are that you will get weird behaviour while doing steps 4 or 5 - Chrome gets confused about the sizes, or forgets to draw a vertical region of the page (which is rendered white). I've also managed to get a "phantom side pane" in some rare occasions.
I've tried in two different computers, and I still get the same issues (both using Ubuntu 12)
The thing is, other responsive sites don't have this issue. See for example http://css-tricks.com/ . You can change its size all you want, and Chrome never has any trouble rendering the multiple layouts it has (in fact, it has more layouts than twitter bootstrap).
So I can only conclude that this problem is twitter-bootstrap-specific. Probably related with the way the CSS rules or HTML content is written, or maybe related with the way files are structured.
I'm using twitter bootstrap as a base for one of my sites, and I'd like to solve this issue. Does anyone have any ideas on how to proceed?
If you believe this is bootstrap-specific this should be posted to the Twitter Bootstrap Github Pages instead of SO. However, I've been participating in an issue ticket reg. this which was closed after we pointed out that we're unable to reproduce the error on both Chrome / OS X and Chrome / Win 7 with the same browser build as the OP. This suggest that this is a platform specific chrome-error rather than a problem with the Bootstrap toolkit. With that said, I'd raise a ticket with the chrome team including your build # and OS/Platform setup.
Link to the Github Issue