Response title
This is preview!
data-mini="true" vs css scaling for jqm forms on mobile phones
in jQuery Mobile
•
10 years ago
What is the best way to prevent line breaks and overlapping on jqm forms?
On tablets a form might look good but then when you view the same form on an android phone or iphone it might look horrible. In the next version of jqm they are adding data-mini="true" for form elements so you can check if the device is a phone and then choose whether or not to apply the data-mini="true" attribute.
I've made a few examples but they all look different on different devices and browsers. I also made a video which illustrates the line break problem. I put an example of data-mini here and css sizing here. The css sizing one either looks the best or completely incomprehensible depending on how you view it (desktop safari works best) but the zoom is set to 10% on all elements so if it looks completely horrible that is why.
This picture shows the difference between an element marked up with and without data-mini="true". The only difference is the ui-mini class. I went through the non-minified css file and copied all of the css attributes ui-mini ever uses and listed them in the picture.
My question is what do you think is the best approach to sizing forms for mobile phones with jqm?
1