There is a website which displays different page titles in certain browsers. If i open it in Chrome(latest Win10), then the page title is "Do they know it's Europe?", but if i open it in Chrome(latest Android, OnePlus 5), then it says "Do you know Italy's?". It seems every other browser (Opera, Edge, Mozilla, Mozilla for Andriod, etc) shows the first title. I checked the source code of the pages, but they seem to be identical to me.
Here it is what i can see when i open that page in Chrome for Android: https://prnt.sc/nrkq26
And here it is what i can see opening that page on PC:
http://prntscr.com/nrku2n
http://dotheyknowitseurope.eu/index.html
Related
Description:
I've checked similar issues, but none of the provided solutions seem to work in this case. My assumption is that this has something to do with pdf document itself, appreciate if anyone could take a look.
Steps to reproduce
Here is the sandbox with the example
https://codesandbox.io/embed/gallant-thunder-x3o7v7?fontsize=14&hidenavigation=1&theme=dark
Expected behavior
Links are clickable. Please see the online demo https://projects.wojtekmaj.pl/react-pdf/
Actual behavior
Links are not clickable
Interesting fact, that google viewer does not open the links either (pages 4, 5), but if you download the document, links are working. I'm using default previewer on MacOS
Environment
React-PDF version: 5.7.2, same behaviour on 4.1.0
React version: 18.0.0, same on 16.4.0
Also, I used iframe and embed, and really it make link clickable but its not display pdf on safari IOS
The problem is you are using a "virtual PDF reader" (GoogleDocs/Mozilla PDF.js) which produces images and searchable text as separate layers, the link is there but it is the highlighted yellow zone not the blue underline text. also due to browser security I have to right click to open at my choice in new tab or new window (my choice would be save link as PDF for offline viewing).
In a true PDF viewer like Chrome embedded PDF Plugin or the users iFrame / offline viewer, the links would work perfectly. Again whichever way the user decides.
This problem happens in many ways. Today is the last straw. In my terminal window, when a program wants to open a URL, it starts-up a browser. It used to fire-up chrome instead of Firefox (the default browser). I uninstalled Chrome. (Yes I know, I was in a hurry that night).
So anyway I have two or more Firfox Profiles set-up on my Desktop. I took some 'time' to think about this beforehand.
I've named the profies with numbers:
10_self
10_wrk.remote
10_daughter
10_daughter
Well ... I just figured it out by chance. Firefox has a few configuration pages. One interesting page is:
about:profiles
Firefox opens the default profile when it is passed a URL to load. The name of the profile or short-cut have not effect. Even a profile named "default" is not selected as the default.
The default needs to be set in the about:profiles page.
I am working on a news website, trying to implement amp. We are using Mobile_Detect.php to serve desktop pages to desktop and tablets, and mobile version to mobile phones and that works OK, our pages are mobile friendly according to Google for some time now, no problem.
Now, I started to enter the code for amp pages and encountered a situation I can' resolve. URL for the amp version have .amp at the end. Depending on the user's device, we are generating the page from the database and serving different pages to different devices.
Now, PageSpeed Insights and Mobile-Friendly Test shows that the page is mobile friendly but amp validator is pulling the desktop page, I can see by the source code it prints out, instead of a mobile page. I'm on the desktop, Chrome, but I'd expect it to work with mobile pages.
You can see that here: https://validator.ampproject.org/#url=http%3A%2F%2Fwww.poandpo.com%2Fbusineasdfasdfas-usual%2Fpublic-housadfadf-kong-972016223.amp
I installed Chrome amp extension and it says "AMP available" but when I click on it it also pulls the desktop version of the page and it's blank. I would expect the extension to load the mobile page but it doesn't.
We do have links canonical and amphtml, that's why the extension says there is an amp page.
So, how to tell validator to pull the mobile version of the page? The amp implementation is not done yet and I know there are some things missing, but without a validator is a bit hard to program.
Another interesting things is that when I open "Inspect" in Chrome and toggle to responsive design, it shows the mobile version of the webpage correctly. It also says "Powered by amp" and shows no errors although there are errors because we didn't even implemented all tags.
If anybody has any suggestion how to make amp validator to show the mobile page I'd appreciate that. Thank you.
I had a quick look at your pages but it appears that the amphtml reference but there appears to be a problem in the URL you are generating in the href= field. If you take a close look, the AMP URL is missing a '/'.
Broken: http://www.poandpo.com/business-as-usualmexicans-work-longest-hours-germans-the-least-97201645.amp
Works: http://www.poandpo.com/business-as-usual/mexicans-work-longest-hours-germans-the-least-97201645.amp
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.