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?
Related
I'm looking to embed an existing survey monkey survey into a webpage, following the instructions here:
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
which is working perfectly on desktop and tablet sizes, but for some reason not working on mobile (either on an android device or in chrome emulator)
The following steps appear to be working:
Loading embed script into the page
Embed script calls surveymonkey.com, and retrieves the SMCX script
SMCX.boot() is called
But, the survey (or its markup) does not appear in the page.
Has anyone else run into this issue? What other additional information can I provide?
The Website Collector used to work everywhere, but they changed their API and now document that mobile is not supported.
http://help.surveymonkey.com/articles/en_US/kb/Website-Collector
"Website Collectors display on desktop browsers only—not on mobile devices or tablets."
It's actually worse than not supporting mobile or tablets, their surveys don't even load on desktop browsers if your browser is currently 760 pixels or less wide.
The solution is to just iframe the web link in manually.
<iframe height="500" width="500" src="https://www.surveymonkey.com/r/XL3DDMS"></iframe>
In addition to the answer of using iframe, for iPhone, both in Safari and Chrome rendered a weird view (the spacing between each question is extremely large), and I finally tackled it by turn off the "One Question at a Time" option, hope this helps someone.
I'm working on a simple mobile website for a hotel.they don't need much dynamic feature.most are simple HTML.So my question are as below.
I find it's hard to debug mobile website on Ubuntu.cause you know ,desktop browser are to big to show a mobile website.each time i need to put it on a server.then using a phone to test the mobile website.is't too annoy.is there a better way to do this?
On windows u have Dreamweaver to change the css style.but on Ubuntu can I find a tool like Dreamweaver?
is any any JavaScript code for animation for a mobile website.
Jquery mobile is a good js lib to create the basic element in webpages.but if I want to do some transition between pictures.how could I do that.
PS:if you want to use php to send a email to a email address how to do that?
In chrome you can emulate a mobile device, the viewport and user agent will adjust to desired device. In your developer tools you have something called Emulation where you can change your device.
Link!
To send a email with PHP, check the documentation:
Link to php docs
FWIW, I would reccomend you start with a resposive framework. There are plenty of great options, including Bootstrap , Foundation or Skeleton
From what you describe about your requirements, responsive is going to be a good fit for your client and you'll future-proof your design.
Then with a responsive design, you can test everything in a standard web browser by making the viewport or window wider or smaller.
Good luck!
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
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 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