I'm currently developing a mobile site and I'm finding it very clunky to work with a browser through an emulator.
Is there any way I can make a browser (which runs on OSX) "pretend" it is a mobile browser so that I can get mobile html back from the site I'm guessing things like inspect in chrome or firebug on firefox?
NOTE: I really wish I could have accepted all of the answers.
I think you can change the User-Agent of the browser and then, the server will send you, if a mobile version is available - this one!
Like stylesheets etc.
There is a nice addon for firefox called "User Agent Switcher"
For Safari;
In the normal Mac OS X Safari, go to Preferences/Advanced and check "Show develop menu in menu bar". A menu called "Develop" will show up with a sub menu called "User Agent". In that you can choose to send user agent strings for - for example - iPhone and iPad.
The develop menu also has a "Web inspector" which while not as powerful as FireBug is pretty good for inspecting the results.
Related
hrmantra
is the site i want to view mobile view of. For which i have also changed my user-agent string in my pc's mozilla browser. I need this to be done, please help
You can use the Responsive Design Mode tool in Firefox to pick a mobile phone configuration or create a new one with custom settings. You can access this tool, as reported on the provided links:
From the Firefox menu: select "Responsive Design Mode" from the Web
Developer submenu in the Firefox Menu (or Tools menu if you display
the menu bar or are on OS X).
Picking a mobile device will automatically set the correct screen resolution, user-agent string and device pixel ratio (DPR).
I was seeing a website i.e. website if you give pincode and search, you will be provided with a listing. When i click on any listing the section shows up on map. But when i go on a mobile, i see that click works differently i.e. a section slides in. How is this done? does the same function work different in mobile and desktop?
Cool effect, no? So open up the site on your desktop. Open it in Chrome. Then open the Chrome Developer tools. I use right click --> Inspect. Then on the top bar of the dev tools on the left hand side choose the icon "Device Mode" Select a device like an iphone or something. Now you can simulate this (or any site) on a mobile device. Its not a prefect simulation, just size and shape and general touch screen events like swipe and touch.
The design of this site uses some sort of javascript library to manage the transition. I've used jQuery Mobile in the past and this is exactly what it does. I'm guessing Controls.js is the tool that's doing this here, but I'm not positive all the nuances of this site. There are quite a few JS tools loaded here.
What ever happened to less is more, sigh?
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 can't figure out what is causing this issue on the BlackBerry Z10 where the mobile menu that I created for disinherited.com won't properly function as links.
The menu items won't click through to their href's or show their dropdown menus(javascript).
It works well on a number of other browsers and devices. This is just one that won't work.
Anybody have any suggestions as to what browser compatibility issues I might be missing?
The "About Us" link doesn't do anything for me (even on Desktop browsers).
I would guess that there might be some CSS (a layer maybe) that is interfering with the click/action event. I would suggest connecting remote web inspector to see what exactly is going on.
Did you know that BlackBerry 10 has some of the best remote web debugging capabilities?
Plug your device in via USB
Enable Settings -> Developer Mode
Open http://disinherited.com in the BlackBerry browser
from your desktop browser, open http://169.254.0.1:1337
You are connected to the live content, running on the BlackBerry, from your desktop browser. From there, you can inspect, debug, profile what your website is doing.
With respect to webpages and webapps using Facebook's Javascript and Server side integration...
Facebook documentation notes that the send dialog is not supported on mobile devices, but they don't indicate how they make the determination that the dialog will not be shown or how we can find out.
This makes it difficult to display some alternate functionality in the right cases. For example the iphone is out, but the ipad will display the iframe version. The Nexus 7 with Chrome won't do the popup, but it doesn't have "mobile" in the user agent.
Does anybody know the criteria? ie. Regex on the user agent, or some certain feature detection?
Right now I am using browser sniffing :-(
function isMobile(string) {
return /mobile|android/i.test(string || navigator.userAgent);
}
Which, for instance, doesn't account for the fact that iPad Safari will display this dialog as an iFrame (but not the popup).
Thanks.