So I built a web app with Ruby on Rails, and the styling is done with Bootstrap. Unfortunately, front end design is not my strong suite.
The app is hosted here and the source code is on GitHub
I was able to position two text input boxes and an bout button in the middle of the main page. This looks great on a desktop, but on a mobile phone it looks tiny.
Is it possible, using Bootstrap or Rails, (I would prefer to do it client side if possible) to make these text boxes and buttons re-size to fit a mobile phone screen?
You're missing the viewport meta-tag in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Check out the basic template in the Bootstrap documentation: http://getbootstrap.com/getting-started/#template
Related
My problem
I have embedded a Memberpress form inside my Wordpress page (designed with Elementor), but when trying to fill out the form on iOS devices, the text inside the field is not centered. I can only see the top of the text.
The problem doesn't seem to appear on other operating systems, and it doesn't happen on desktops.
Have a look at a screenshot here: https://imgur.com/a/8fzBUFe
What I have tried to do
I have tried to embed some custom CSS with no effect. I might not be getting the syntax right as I am fairly new to this - and to the "Custom CSS" function of Elementor.
{-webkit-user-select:text;}
And also:
<meta name="viewport":
content="height=device-height;
width=device-width initial scale=1.0, maximum-scale=1.0,
user-scalable=no, target-densityDpi=device-dpi"}>
I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.
http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps.
The old window.scrollTo() which worked for iOS6 no longer works.
Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
With iOS 7 I don't think you really have a choice. Obviously Apple doesn't want developers doing this anymore, and even if someone finds another workaround it probably won't stick around for that long.
Honestly, I think getting fullscreen functionality is a fair trade off for users to install the app to their home screen. Obviously there are certain cases where this isn't true, but I guess I find it understandable to some degree. You should still be able to add the following meta tag and it will be fullscreen once added to home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
There are a few nice libraries out there that add an "add to homescreen" prompt that you can set up to be rather unobtrusive with custom messages. In this case, might be best to embrace the change...
In Bootstrap 3, there seems to have been an issue with the fluid grid causing a horizontal scrollbar to appear on small devices. My question is different...
I'm not getting any scrollbar, unless I click a text input. On an iPhone, there is an automatic zoom on the current field. This is ok (I guess), but after leaving the field, the zoom is not removed, so the content is clipped and there's an ugly horizontal scrollbar.
Is there a way to prevent the zoom? Or maybe tell mobile safari to set the zoom back to what it was?
First: you can create fluid-responsive tables. But you do not need it. If you don't give the <table> the class="responsive" the horizontal scroolbar doesn´t appear.
If you want to disable the zoom on small devices use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Hope, it helps :)
Ahhh... I'm beginning to tire of the viewport tag.
Anyway, hopefully someone out there can assist with this question. I know similar questions have been asked on SO, and I've read quite a few of them, but they seem to be under different circumstances.
I have a DIV that is 100%x100%.
I've applied background-size:cover to the background image inside this div.
When testing in all browsers, I get a nice, pretty, full-screen background image that sizes with the browser window - as it should. Even on the ipad it will pull up and look great, in both orientations. :) Happy.
Now, as soon as I add the ridiculous viewport meta tag (which I'm foreseeing a lot of users slapping onto their websites alongside my script), the ipad revolts, unless it's exactly this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
As soon as I allow scaling of the page by changing the initial-scale or maximum-scale, the background-size cover breaks.
Any ideas?
Also, would it be a bad move to just remove the viewport meta tag in the script to avoid all of this together?
Thanks!
I developed a web app for the iPhone which has a page with a textarea widget. When I begin editing the contents of this textarea widget Safari zooms in and makes the text really, really big. Now I can't see the document anymore, just a little postage stamp sized piece of it.
Are there any properties I can set which will keep mobile Safari from doint this? I just want the textarea font to stay the same size when I edit its text. Thanks.
You can add:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
to your HTML header.
You would need to set your textarea font-size to 16px and have an initial-scale of 1.0.
But if your app is not really designed for the iPhone, that is, if it’s essentially a normal web page that users should be able to scale, then you should probably just become okay with it. The worst thing to do to your users is show them 6pt text they can’t zoom, you know? Some of them won’t have perfect vision.
See also: Apple's list of all Safari/iOS special meta tags.