I am working on a Responsive Coming Soon page. It looks quite fine on several devices like iPad or iPhone, but to test them on multiple platform I am using Opera Mobile Emulator.
It is not detecting the Custom Font retrieved from Google Font API used in CSS. It's rather showing the fallback font come as default given within CSS. Problem is within emulator I can not see if the font has been loaded or not using the resources timeline.
Was testing the Emulator for Samsung Galazy Nexus.
What might be the reason behind this? Can anyone help? Thanks in advance.
From what I can tell from this page: http://dev.opera.com/articles/view/opera-mini-web-content-authoring-guidelines/#typography Opera mini doesn't support custom fonts, specifically:
setting font-family will have no effect
Related
I have developed my app using codename one.User Interface of my application looks different in Android and IOS.Some textboxes size gets change .Images looks different in android and IOS .Every thing should display same and properly for all OS.What should I do for that?
Thanks in advance
That is intentional: https://www.codenameone.com/blog/tutorial-theming-basics.html
You need to override the elements that look different, you can install an Android simulator and preview in both Android and iOS to get the desired result. You can also switch the mode of the designer tool to display the UI as it would appear on an Android device.
I'm using materializecss.com and angularjs for my website. The problem is quite interesting:
When i use Chrome and resize my website, everything stays responsive (not perfectly tough). But when i use the Chrome Emulation tool (with Apple iPhone 6) its not responsive anymore.
Have a look at the screenshots:
So you can see the different scale.
You can have a look at it at zencubes.io
Any ideas?
The description of your problem sounds like it's been answered here previously at Stackoverflow here, where it works in the device emulator in Chrome but not on the actual device itself.
Why CSS Media Query doesn't work on mobile device but yes on Google Chrome device emulator?
Have you checked your Viewport meta tag settings, in particular the width attribute?
I'm looking for iPhone, iPad, Android and other mobile and smartphones web browsers simulators on x86. I would like to check how my web application written for standard web browser will be displayed on these devices.
The dev kits for these platforms include platform emulators, in which you can run the browser for that platform and load your web site to see how it will look.
http://developer.android.com/guide/developing/tools/emulator.html
http://developer.apple.com/programs/ios/develop.html
I'm programming a web application for mobile and I use JQueryMobile.
You can have more informations here :
http://jquerymobile.com/gbs/
if you just want to quickly view how a webpage would render at various mobile device resolutions then synthphone.com is a nice little webpage...
http://synthphone.com
you can even link directly to a url via query strings. for example, here is one that should load the Sencha Touch 2 carousel. Use your mouse like a finger to slide around the images etc.
http://www.synthphone.com/?u=http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html
have fun!
I would like to add value to my website that I have developed at the moment so that user can check on their mobile phone.
My questions:
Should I make different template for mobile version and full version one?
Like creating mobile.example.com for mobile version?
Does Opera Mini not support JavaScript? I have a mobile phone that has Opera Mini, it seems that JavaScript was not running. Do all Opera Mini not have JavaScript on it?
Does Opera Mini support full W3C standard HTML and CSS? Or do they have a different one?
Is there any emulator to view or test website in different mobile phones? For example: Iphone browser, Blackberry browser, WAP and Opera Mini.
Thank you!!!
Some websites offer an automatic conversion of your existing website. This converted, mobile friendly website can either be hosted at a new domain, or a "mask" can be applied over your existing site. Check out www.webtosmartphone.com, which easily converts basic websites automatically; a quick line of code and your website will be automatically resized and viewable in the most popular smart phones. If it is not converted automatically, you can request for a custom conversion.
It's up to you whether you want to make two different websites for mobile and non-mobile devices. However, if you do so, make sure to have a link from the mobile site to the full site to enable users to switch to it.
Opera Mini does support Javascript which certain restrictions (eg. on asynchronous operations). Be aware that Opera Mini uses a proxy based approach and the JS is executed on Opera's servers which imposes certain restrictions. Plugins like Adobe Flash are not supported.
Basically, Opera Mini supports the same standards as Opera Desktop since they share the same rendering engine (Opera Presto). However, due to device restrictions, some features like CSS rounded corners are not available in Mini. See Opera Mini 5 standards support for more information, but know that meanwhile Opera Mini uses Opera Presto 2.4, the rendering engine used in Opera Desktop 10.53.
For testing websites in Opera Mini, try MicroEmulator which is Open Source and comes with a resizable skin that allows you to emulate different screen sizes.
Hope that helps :)
You should most definitely adapt your output for mobile devices when the content is accessed via a mobile device. Whether you will do it by separating the mobile presentation on a subdomain or a special folder or not is totally irrelevant.
/ 3. Mobile is way more than just Opera Mini. Various mobile device browsers support various degrees of rich content (JavaScript, CSS etc.) You should look into detecting what features are supported by the visitors browser/device and serve the appropriately rich/"poor" content. You should take a look at WURFL and Device Atlas which are two main databases of mobile device useragents which allow you to serve only the content that the useragent can consume.
There are many emulators out there, some better and some worse, that emulate various mobile device browsers. Off the top of my head, the two I've used are Yo Space SmartPhone Emulator (website broken atm) and Mobi TLD's emulator. There are also vendor specific (Nokia, SE) developer tools you should be able to find that emulate the vendor's devices.
Cascading Style Sheets (CSS) are the way to accomplish this. It does mean that you will need to review your site's use of HTML tables, and convert into a CSS based design.
The CSS Zen Garden is an excellent resource for showing what is possible.
A resource to convert your current
site into a mobile device friendly
format is Skweezer.com. Simply enter
your website's URL, and it will
display your website in a
mobile-friendly version by removing
large images, CSS styles and page
elements that will not display
properly. You can use this as a
template, or starting point, for
making a mobile CSS profile for the
site. To provide an alternative CSS
stylesheet for users with mobile
devices, insert the following code in
the head of an HTML document:
<link href="/css/global.css" rel="stylesheet" type="text/css" media="handheld" />
Ref.
I have designed my site with a 900 x 600 fixed background image. On the computer it looks fine. How will it look on a PDA device? Will I have to design it separately for PDA?
How should check whether my site can be browsed effectively from mobile phone?
What should I do?
Try using Opera's "small screen" view (View > Small Screen). This does a pretty decent job of simulating a mobile screen. Try it on Opera's own site. Note that they use a "handheld" type stylesheet that kicks-in when you're viewing on a handheld or switch to small screen mode.
You can download Google's Android SDK for free to test on.
To test on iPhone, see the iPhone Tester. There's a button on the bottom-right to rotate the iPhone into its widescreen state.
The OpenWave Phone Simluator is supposed to be good.
You can try the mobi online emulator.
The Windows Mobile 5.0 SDK for Smartphone contains "Windows Mobile 5.0 based Smartphone Device Emulator images & skin files"
Finally, some general guidance: Web Content Accessibility and Mobile Web: Making a Web Site Accessible Both for People with Disabilities and for Mobile Devices
Instead of browser detection, you can supply alternative stylesheets for handheld devices. With
<link rel="stylesheet" href="small.css" type="text/css" media="handheld">
The advantage is that you only need one version of your site, the difference lies in the stylesheets. You need one additional css, while with browser detection you would need different versions of every page in your site. The downside is that not all browsers support the media attribute for stylesheets. But the most modern browsers do, and the support for it is growing.
If you are interested, I recommend having a look at an A List Apart article.
BTW, if you are not using css yet, switch to it immediately, no matter which solution for your problem you choose. CSS rocks!
You can also get device emulators for the Blackberry range of machines.
Well, you could always throw some detection javascript in there to check the type of browser, then redirect to a different site that is formatted for mobile devices. This seems to be the norm for most sites.
Examples:
Digg.com
Twitter.com
Google.com