In Phonegap I have come across the problem, that if we change the font size of the mobile device from the setting to normal to large then the css which has applied to the application breaks.
So how to overcome this problem ? I have searched a lot but not able to find any solution regarding it.
Any help or advice would be helpful.
It works fine when device font-size is normal.
Image here
As I change the device font-size from setting>Display>fonts to Huge
Image here
Just found out the solution exactly as i need.
By using this plugin.
And Just write the following in your onDeviceReady function in index.js.
if(window.MobileAccessibility){
window.MobileAccessibility.usePreferredTextZoom(false);
}
This will just ignore the system font preferences.
By the information you passed I think that if you adjust the media queries, and the viewport you will have the desired result.
Viewport example. Phonegap Application text and layout too small
Media queries example. Scaling a Phonegap app for different Android screen sizes/densities?
Related
I want to create a web app such as this?
I already have a mobile app how do I display my mobile app like this on the large screens?
On large screens, I want a mobile and then mobile app running within it.
This is the link for the website shown in image
I want my Website to work like this, how can I achieve it?
I already have an mobile app made using ionic, what i want is to use that app for large screens like this website has used.
I'm not sure if I understand what you're asking.
To make responsive websites, you should use this:
#media (min-width: Xpx) {
}
You can define your minimum width here, that indicates the size of browser at which these settings should be applied. If you're using sass, nest this and apply your browser-sized settings there.
I hope that was helpful, but maybe I misunderstood the question and it's more complicated
I don't have any experience of this problem but there is a dedicated article here: https://ionicframework.com/blog/tips-tricks-for-ionic-on-desktop/
This can be created by using an Iframe on the Desktop.
So I created an SVG for the borders of the mobile and rendered my app inside the SVG using the Iframe.
Since I am using Iframe so my app takes mobile width as viewport width and is rendered as it should on mobile.
In the android OS you can change font-family in the settings. I am making a react-native app and I don't want to the device to load a different font than I am setting for my app.
I am having trouble finding answers on how to disable this function in the android OS. I see lots of stuff for font scaling but nothing to disable changing font from within the android OS.
Justin, look in to setting the prop called allowFontScaling to false, this is keep your Font the same to what your app intentionally needs.
Link:
https://facebook.github.io/react-native/docs/text.html#allowfontscaling
I needed my font family to stay the same only for my apps header so I just took a screen shot of the font I wanted and added the screen shot for my header instead of a Text component.
I am working with an iOS magazine framework (PugPig) which loads HTML documents into a WebKit powered view (a chromeless version of Mobile Safari).
I would like each 'page' to load either a portrait or landscape version of an <img/> depending on the orientation of the device. For various reasons it has to be an <img/> rather than a CSS background image, so media queries won't work. Because I am loading HTML from the local device, no web server stuff can be used either.
So I am guessing that JS is the way to go, but it would need to detect orientation change (or at least screen width) on the fly, without a page refresh, and I don't know if this is possible.
Not hugely familiar with JS hence no sample code (all my attempts so far are car crashes). Sorry.
Any help much appreciated.
Did you try jQuery mobile's orientationchange events?
I've never done this, but it seems you could go this way.
OK, found a solution using CSS Media Queries after all, by setting the display property of the img. Bit of a fudge, but fine for now.
Basically I created two divs, one with a 'landscape' id and another with 'portrait', positioned absolutely on top of each other. Then used #media queries to show/hide the relevant div with the display: property. Very clumsy, not at all suitable for the web but okay for an iPad app loading data straight from memory. And this was before "responsive images" became a thing.
I'm building a website that will need to have diff mobile layouts depending on the screen size of the device but I don't want to have to design entirely new layouts for each device. So I was wondering if there are things I need to watch out for that don't convert well into a mobile layout? Or how to set up the original to scale well to smaller devices. Thanks a lot
Read about media queries:
http://www.w3.org/TR/css3-mediaqueries/
Then read about responsive layouts done with purely CSS:
http://css-tricks.com/6731-css-media-queries/
This is basically all about styles and sometimes javascript (if you want to make responsive design)
Take a look on what CSS should be loaded for different devices and how to use
http://podlipensky.com/post/2011/08/25/What-CSS-file-to-load-for-mobile.aspx
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
And here you can read about responsive web design
http://www.alistapart.com/articles/responsive-web-design/
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
Can anyone recommend the best way to target different mobile screen sizes?
I have tried media types but it doesn't work properly, so wondering whether a javascript method would suit?
We basically want a client side solution that will serve different style sheets for different screensizes, depending on the connecting device.
Any advice gratefully received!
Thanks
Paul
Take a look at www.columnal.com
A responsive CSS grid system helping desktop and mobile browsers play nicely together.
or cssgrid.net
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Just to name two.