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.
Related
Not sure if this is possible in other mobile browsers, but it is possible to open the devtools inside the Edge browser app in you phone?
I have this UI issue that that I can see on my phone and so far I haven't been able to reproduce it on Edge desktop or any other desktop browser for that matter; not even if I match the screen size using the dekstop devtools.
I need Edge mobile devtools specifically because the website is internal and only accessible through Edge.
Devtools are not available for Edge mobile.
If you want to debug the Edge mobile app, you can use Device Mode to simulate mobile devices in your desktop Edge Chromium browser. For the detailed steps, you can refer to this article.
If you're using Android devices, you can even use remote debugging. It can remote debug live content on an Android device from your Windows or macOS computer. You can refer to this article for more information.
It's possible with help of eruda project
Add bookmark on any website, name it as Open DevTools, put this script as a value
javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })();
Open website you would like to investigate
Open search bar and enter same name, Open DevTools - your bookmark will appear
Click on it, few seconds later you will see gear icon on the bottom. Click on this icon will open dev tools
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 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.
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!