Method and device for modifying browsed page, storage medium and electronic equipment

Abstract

The invention discloses a browsing page modification method and device, a storage medium and electronic equipment, and relates to the technical field of smart home. The method for modifying the browsed page comprises the following steps of: determining whether barrier-free preference setting of a target object is cached in equipment or not through a script language of the equipment; under the condition of determining that the barrier-free preference setting is cached in the equipment, determining whether the barrier-free preference setting conforms to a media query rule of the equipment or not through a media interface in a script language; and under the condition that the barrier-free preference setting conforms to the media query rule, a style variable in the script language is adjusted according to the barrier-free preference setting so as to modify a browsing page of the equipment, and the style variable is defined in a root selector covering the whole script language. By the adoption of the technical scheme, the problem that in the related technology, modification of the barrier-free browsing page needs to be specifically achieved in each code, and consequently the modification process is too tedious is solved.

Description

Technical Field

[0001] The present application relates to the field of smart home technology, and more specifically, to a method and device for modifying a browsing page, a storage medium, and an electronic device. Background Art

[0002] In traditional accessible browsing design, each accessibility requirement (such as high-contrast display, text description instead of image, keyboard navigation, etc.) often requires detailed code writing in the device. This means that if you want to support multiple accessibility requirements, developers need to modify each accessibility function through code, making the modification process too cumbersome.

[0003] In the related art, the modification of accessible browsing pages needs to be implemented in each code, which leads to the problem that the modification process is too cumbersome, and no effective solution has been proposed yet. Summary of the invention

[0004] The embodiments of the present application provide a method and device for modifying a browsing page, a storage medium, and an electronic device, so as to at least solve the problem in the related art that modifications to accessible browsing need to be implemented specifically in each code, resulting in an overly cumbersome modification process.

[0005] According to an embodiment of the embodiments of the present application, a method for modifying a browsing page is provided, comprising: determining, through a scripting language of the device, whether accessibility preference settings of a target object are cached in the device; when it is determined that the accessibility preference settings are cached in the device, determining, through a media interface in the scripting language, whether the accessibility preference settings comply with media query rules of the device; when the accessibility preference settings comply with the media query rules, adjusting style variables in the scripting language according to the accessibility preference settings to modify the browsing page of the device, wherein the style variables are defined in a root selector covering the entire scripting language.

[0006] In an optional embodiment, adjusting the style variables in the scripting language according to the accessibility preference settings includes: obtaining the accessibility preference settings of the target object cached in the device; determining the corresponding style variables in the scripting language and the target values ​​to be adjusted for the style variables according to the accessibility preference settings; and replacing the initial values ​​of the style variables with the target values.

[0007] In an optional embodiment, before determining whether the accessibility preference setting complies with the media query rules of the device through the media interface in the scripting language, the method further includes: querying the display settings of the device through the media interface, wherein the display settings include at least one of the following: screen size, screen resolution, screen orientation, contrast preference, and color theme mode; defining corresponding media query rules according to the display settings, and defining the sample variables according to the media query rules.

[0008] In an optional embodiment, determining whether the accessibility preference setting complies with the media query rule of the device through the media interface in the scripting language includes: when the target object turns on the accessibility function of the device, identifying the target setting corresponding to the accessibility function from the accessibility preference setting through the media interface, wherein the accessibility function is used to instruct the scripting language to modify the browsing page; determining the corresponding media query rule from the device according to the target setting, and determining whether the target setting complies with the media query rule through the media interface.

[0009] In an optional embodiment, after determining whether the accessibility preference settings of the target object are cached in the device through the device's scripting language, the method further includes: in a case where it is determined that the accessibility preference settings are not cached in the device, displaying the browsing page according to default settings, and adding a listener to the browsing page, wherein the listener is used to detect changes in the accessibility preference settings, and the default settings refer to style variables included in the device in an initial situation; in a case where the listener detects that the accessibility preference settings have changed, obtaining new accessibility preference settings.

[0010] In an optional embodiment, after obtaining the new accessibility preference setting, the method further includes: when the new accessibility preference setting complies with the media query rule, adjusting the corresponding style variables in the scripting language according to the new accessibility preference setting to modify the browsing page, and storing the new accessibility preference setting in the device.

[0011] In an optional embodiment, after determining whether the accessibility preference setting complies with the media query rules of the device through the media interface in the scripting language, the method further includes: if the accessibility preference setting does not comply with the media query rules, displaying the browsing page according to default settings, wherein the default settings refer to style variables included in the device under initial conditions.

[0012] According to another aspect of the present invention, a device for modifying a browsing page is also provided, comprising: a first determination module, used to determine whether the accessibility preference settings of a target object are cached in the device through a scripting language of the device; a second determination module, used to determine whether the accessibility preference settings comply with the media query rules of the device through a media interface in the scripting language when it is determined that the accessibility preference settings are cached in the device; and a modification module, used to adjust style variables in the scripting language according to the accessibility preference settings to modify the browsing page of the device when the accessibility preference settings comply with the media query rules, wherein the style variables are defined in a root selector covering the entire scripting language.

[0013] According to another aspect of the embodiments of the present application, a computer-readable storage medium is provided, in which a computer program is stored, wherein the computer program is configured to execute the above-mentioned method for modifying a browsing page when running.

[0014] According to another aspect of an embodiment of the present application, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the method for modifying a browsing page through the computer program.

[0015] According to another aspect of the embodiments of the present application, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, the method for modifying the browsing page is implemented.

[0016] In the embodiment of the present application, on the premise of confirming that the device has saved the accessibility preference settings, the media interface in the scripting language is used to determine whether these accessibility preference settings match the media query rules of the device. When the accessibility preference settings match the media query rules, the browsing page of the device is dynamically changed by adjusting the style variables in the scripting language. The above technical solution solves the problem in the related art that the modification of the accessible browsing page needs to be implemented specifically in each code, resulting in an overly cumbersome modification process. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0018] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0019] Figure 1 It is a hardware environment diagram of a method for modifying a browsing page in an embodiment of the present application;

[0020] Figure 2 is a flow chart of a method for modifying a browsing page according to an embodiment of the present application;

[0021] Figure 3 A flowchart of a method for modifying a browsing page according to an embodiment of the present application;

[0022] Figure 4 It is a structural block diagram of a browsing page modification device according to an embodiment of the present application. DETAILED DESCRIPTION

[0023] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0024] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0025] According to one aspect of an embodiment of the present application, a method for modifying a browsing page is provided. The method for modifying a browsing page is widely used in smart home, smart home, smart home device ecology, smart residential ecology and other whole-house intelligent digital control application scenarios. Optionally, in this embodiment, the above-mentioned method for modifying a browsing page can be applied to Figure 1 In the hardware environment composed of the display device 102 and the server 104 shown in FIG. Figure 1As shown, the display device 102 is connected to the server 104 via a network, and can be used to provide services (such as application services, etc.) for the display device 102 or a client installed on the display device 102. A database can be set on the display device 102 or independently of the display device 102 to provide data storage services for the display device 102 and the server 104. Cloud computing and / or edge computing services can be configured on the display device 102 or independently of the display device 102 to provide data computing services for the display device 102 and the server 104.

[0026] The network may include but is not limited to at least one of the following: wired network, wireless network. The wired network may include but is not limited to at least one of the following: wide area network, metropolitan area network, local area network, and the wireless network may include but is not limited to at least one of the following: WIFI (Wireless Fidelity), Bluetooth. The display device 102 and the server 104 may be but are not limited to PC, mobile phone, tablet computer, smart air conditioner, smart range hood, smart refrigerator, smart oven, smart stove, smart washing machine, smart water heater, smart washing equipment, smart dishwasher, smart projection equipment, smart TV, smart clothes drying rack, smart curtain, smart audio and video, smart socket, smart audio, smart speaker, smart fresh air equipment, smart kitchen and bathroom equipment, smart bathroom equipment, smart sweeping robot, smart window cleaning robot, smart mopping robot, smart air purification equipment, smart steamer, smart microwave oven, smart kitchen treasure, smart purifier, smart water dispenser, system platform, etc.

[0027] In this embodiment, a method for modifying a browsing page is provided, which is applied to the above-mentioned display device. Figure 2 : is a flowchart of a method for modifying a browsing page according to an embodiment of the present application, the process comprising the following steps:

[0028] Step S202, determining whether the accessibility preference settings of the target object are cached in the device through a scripting language of the device;

[0029] Step S204: if it is determined that the accessibility preference setting is cached in the device, determining whether the accessibility preference setting complies with the media query rule of the device through the media interface in the scripting language;

[0030] Step S206, when the accessibility preference setting complies with the media query rule, adjusting the style variables in the scripting language according to the accessibility preference setting to modify the browsing page of the device, wherein the style variables are defined in a root selector covering the entire scripting language.

[0031] In an embodiment of the present application, a device's scripting language is used to determine whether the target object's accessibility preference settings are cached in the device; if it is determined that the accessibility preference settings are cached in the device, a media interface in the scripting language is used to determine whether the accessibility preference settings comply with the device's media query rules; if the accessibility preference settings comply with the media query rules, the style variables in the scripting language are adjusted according to the accessibility preference settings to modify the device's browsing page, wherein the style variables are defined in a root selector covering the entire scripting language. The above technical solution solves the problem in the related art that the modification of the accessible browsing page needs to be implemented specifically in each code, resulting in an overly cumbersome modification process.

[0032] In an optional embodiment, adjusting the style variables in the scripting language according to the accessibility preference settings includes: obtaining the accessibility preference settings of the target object cached in the device; determining the corresponding style variables in the scripting language and the target values ​​to be adjusted for the style variables according to the accessibility preference settings; and replacing the initial values ​​of the style variables with the target values.

[0033] Optionally, assume that the contrast and font size of the browsing page need to be adjusted according to the accessibility preferences of the target object. Use the JavaScript window.matchMedia API to check the user's accessibility preferences. For example, prefers-contrast and prefers-larger-font-sizes, which reflect whether the target object prefers high-contrast display and whether a larger font is needed. Define CSS variables for contrast and font size in the :root selector (i.e., the root selector). The specific code is as follows:

[0034] / / Query whether the user prefers high contrast display

[0035] const prefersContrast=window.matchMedia('(prefers-contrast:more)');

[0036] / / Query whether the user prefers a larger font

[0037] const prefersLargerFonts=window.matchMedia('(prefers-larger-font-sizes)');

[0038] :root{

[0039] --font-size-base:16px;

[0040] --contrast-factor:1;

[0041] }

[0042] / / Determine the contrast adjustment factor

[0043] let contrastFactor = 1;

[0044] if (prefersContrast.matches) {

[0045] contrastFactor = 1.3;

[0046] }

[0047] / / Determine the font size adjustment factor

[0048] let fontSizeFactor = 1;

[0049] if(prefersLargerFonts.matches){

[0050] fontSizeFactor = 1.1;

[0051] }

[0052] / / Set the CSS variables for contrast adjustment

[0053] document.documentElement.style.setProperty('--contrast-factor',contrastFactor);

[0054] / / Set CSS variables for font size adjustment

[0055] document.documentElement.style.setProperty('--font-size-base',

[0056] `${16fontSizeFactor}px`);

[0057] In an optional embodiment, before determining whether the accessibility preference setting complies with the media query rules of the device through the media interface in the scripting language, the method further includes: querying the display settings of the device through the media interface, wherein the display settings include at least one of the following: screen size, screen resolution, screen orientation, contrast preference, and color theme mode; defining corresponding media query rules according to the display settings, and defining the sample variables according to the media query rules.

[0058] Optionally, you can use @media(max-width:600px) to detect whether the device's screen size is less than or equal to 600px, @media(min-resolution:2dppx) to detect the device's pixel density, @media(orientation:landscape) or @media(orientation:portrait) to detect the screen's current orientation and adjust content display and layout, @media(prefers-color-scheme:dark) to detect whether the target object prefers a dark theme, @media(prefers-contrast:more) to detect whether the target object prefers a high-contrast display, and define the CSS variables corresponding to the above media query rules in the :root selector.

[0059] In an optional embodiment, determining whether the accessibility preference setting complies with the media query rule of the device through the media interface in the scripting language includes: when the target object turns on the accessibility function of the device, identifying the target setting corresponding to the accessibility function from the accessibility preference setting through the media interface, wherein the accessibility function is used to instruct the scripting language to modify the browsing page; determining the corresponding media query rule from the device according to the target setting, and determining whether the target setting complies with the media query rule through the media interface.

[0060] Optionally, the screen width of the device is obtained through the window.matchMedia API, and the screen width of the device is compared with the media query rule to determine whether the screen width is less than or equal to 600px, and when this condition is met or not, the value of the CSS variable --font-size is dynamically adjusted. For example:

[0061] const mediaQuery=window.matchMedia("(max-width:600px)");

[0062] if (mediaQuery.matches) {

[0063] / / The current device meets the media query conditions

[0064] console.log("Screen width is less than or equal to 600px");

[0065] }

[0066] mediaQuery.addListener(function(e){

[0067] if(e.matches){

[0068] / / Start meeting media query conditions

[0069] / / Here you can execute some code to dynamically adjust CSS variables

[0070] document.documentElement.style.setProperty('--font-size','14px');

[0071] }else{

[0072] / / No longer meets the media query conditions

[0073] / / Here you can execute some code to roll back CSS variables

[0074] document.documentElement.style.setProperty('--font-size','16px');

[0075] }

[0076] });

[0077] In an optional embodiment, after determining whether the accessibility preference settings of the target object are cached in the device through the device's scripting language, the method further includes: in a case where it is determined that the accessibility preference settings are not cached in the device, displaying the browsing page according to default settings, and adding a listener to the browsing page, wherein the listener is used to detect changes in the accessibility preference settings, and the default settings refer to style variables included in the device in an initial situation; in a case where the listener detects that the accessibility preference settings have changed, obtaining new accessibility preference settings.

[0078] Optionally, define some CSS variables in the :root selector that will be used to set the initial contrast and font size, i.e. the default settings for the browsing page, and add listeners to the browsing page to detect and respond to changes in these accessibility preferences. For example:

[0079] :root{

[0080] --contrast-ratio:1; / Initial contrast ratio /

[0081] --font-size:16px; / initial font size /

[0082] }

[0083] / / Add listener

[0084] window.matchMedia('(prefers-contrast:more)').addEventListener('change',updateAccessibilitySettings);

[0085] window.matchMedia('(prefers-larger-font-sizes)').addEventListener('change',updateAccessibilitySettings);

[0086] / / Define the listener method

[0087] function updateAccessibilitySettings(){

[0088] if(window.matchMedia('(prefers-contrast:more)').matches){

[0089] document.documentElement.style.setProperty('--contrast-ratio','2');

[0090] }

[0091] if(window.matchMedia('(prefers-larger-font-sizes)').matches){

[0092] document.documentElement.style.setProperty('--font-size','20px');

[0093] }

[0094] }

[0095] In an optional embodiment, after obtaining the new accessibility preference setting, the method further includes: when the new accessibility preference setting complies with the media query rule, adjusting the corresponding style variables in the scripting language according to the new accessibility preference setting to modify the browsing page, and storing the new accessibility preference setting in the device.

[0096] Optionally, when the listener finds that the target object has turned on enhanced contrast in the accessibility preferences, the listener will change the value of the CSS variable --contrast-factor to 1.2, and at the same time, adjust the hue value of the primary color to 220. This adjustment is intended to increase the contrast between the colors of the browsing page to meet the needs of the target object with visual impairments. For example:

[0097] / / Find related attributes

[0098] const prefersContrast=window.matchMedia('(prefers-contrast:more)');

[0099] / / Add a listener to detect changes in user settings

[0100] prefersContrast.addEventListener('change',listener method);

[0101] document.documentElement.style.setProperty('--contrast-factor','1.2');

[0102] document.documentElement.style.setProperty('--primary-hue','220');

[0103] In an optional embodiment, after determining whether the accessibility preference setting complies with the media query rules of the device through the media interface in the scripting language, the method further includes: if the accessibility preference setting does not comply with the media query rules, displaying the browsing page according to default settings, wherein the default settings refer to style variables included in the device under initial conditions.

[0104] Optionally, define the initial values ​​of CSS variables corresponding to contrast and font size in the :root selector as the default settings for the browsing page. If the accessibility preferences do not meet the media query rules, the browsing page is displayed according to the default settings. For example:

[0105] :root{

[0106] --default-font-size:16px; / Default font size /

[0107] --default-contrast-factor:1; / Default contrast factor /

[0108] }

[0109] / / Detect if the user prefers higher contrast

[0110] const prefersHighContrast=window.matchMedia('(prefers-contrast:more)');

[0111] / / If the user's contrast preference does not meet the rules, use the default setting

[0112] if(!prefersHighContrast.matches){

[0113] document.documentElement.style.setProperty('--contrast-factor',

[0114] 'var(--default-contrast-factor)');

[0115] }

[0116] / / Check if the user prefers a larger font

[0117] const prefersLargerFonts=window.matchMedia('(prefers-larger-font-sizes)');

[0118] / / If the user's font size preference does not meet the rules, use the default setting

[0119] if(!prefersLargerFonts.matches){

[0120] document.documentElement.style.setProperty('--font-size',

[0121] 'var(--default-font-size)');

[0122] }

[0123] In order to better understand the process of the method for modifying the above-mentioned browsing page, the process of establishing and implementing the above-mentioned networking is described below in combination with an optional embodiment, but it is not used to limit the technical solution of the embodiment of the present application.

[0124] Figure 3 FIG. 1 is a flow chart of a method for modifying a browsing page according to an embodiment of the present invention. Figure 3 As shown, specifically including the following:

[0125] When the target object accesses a web application through a device or an operating system, the scripting language JavaScript is used to determine whether the accessibility preferences of the target object are cached in the device. When it is determined that the accessibility preferences are cached in the device, the media interface matchMedia API in the scripting language JavaScript is used to determine whether the accessibility preferences comply with the media query rule @media. When the accessibility preferences comply with the media query rule, the corresponding CSS variables, i.e., style variables, are adjusted according to the accessibility preferences to modify the browsing page of the web page in the device. At the same time, a listener is added to the web page to ensure that when the accessibility preferences change, the new accessibility preferences can be obtained in a timely manner, and the corresponding CSS variables are adjusted according to the new accessibility preferences. When it is determined that the accessibility preferences are not cached in the device, the browsing page of the web page is displayed according to the default settings.

[0126] Among them, CSS variables include but are not limited to the size, spacing and arrangement of each module in the web page layout, the font, font size and line height of the text when reading, color contrast, color and light and dark themes, and animation frequency and transition duration when displaying animations. The media query rule @media includes rules in the system or hardware settings and rules customized by the target object. For example, for printing devices, when the user chooses to print a web page, @media print can be used to define the style applicable to print output. For screen devices, different @media rules are defined for different screen sizes. For example, for small-screen mobile phones, @media(max-width:480px) can be used to define the screen style. For tablets, @media(min-width:768px)and(max-width:1024px) queries can be used to optimize for their larger screen sizes. At the same time, @media can also be used with aira-* accessibility features. For example, use @media aira-hidden to detect when an element is marked as "hidden" and set the background color of the web page to transparent through the media query @media to avoid possible interference or confusion. The specific code is as follows:

[0127] @media aira-hidden

[0128] .element{

[0129] / * Styles for elements marked as hidden by assistive technology * /

[0130] background-color:transparent;

[0131] }

[0132] }

[0133] Optionally, the contrast can be further optimized in specific accessibility scenarios via @media , for example, using @media aira-* to set the web page background color to transparent and adjust the contrast to ensure better readability.

[0134] @media aira-hidden

[0135] / * Additional adjustments when assistive technology is in certain states and the user prefers high contrast * /

[0136] :root{

[0137] --contrast-factor:1.5;

[0138] }

[0139] }

[0140] Optionally, @media can be used in conjunction with font size adjustment, for example, increasing the font size to 18 pixels via media queries to improve readability. The specific code is as follows:

[0141] @media aira-hidden

[0142] / * Additional adjustments when assistive technology is in certain states and the user prefers high contrast * /

[0143] body{

[0144] / * When assistive technology requests to increase text size * /

[0145] font-size:18px;

[0146] }

[0147] }

[0148] The above content introduces the overall process of the method for modifying a browsing page and the definition method of CSS variables and @media rules. This embodiment further explains the method for modifying a browsing page through the following examples.

[0149] Example 1: To change the color of the browsing page, you need to predefine CSS variables and CSS calc() calculation rules on the root container: root. For example, set the sample colors <--primary-color> and <--secondary-color>, set the default value of the contrast <--contrast-factor> to 1, and then use the calc() function to calculate the adjusted color variables <--adjusted-primary-color> and <--adjusted-secondary-color>. And apply the calculated colors to certain elements on the page, if the calculated background color is var(--adjusted-primary-color) and the text color is var(--adjusted-secondary-color). The specific code is as follows:

[0150] --primary-hue:240; / *hue* /

[0151] --primary-saturation:100%; / *saturation* /

[0152] --primary-lightness:50%; / *Brightness* /

[0153] --contrast-factor:1 / *Contrast reference value* /

[0154] --adjusted-primary-color:calc(var(--primary-hue)*var(--contrast-factor));

[0155] --adjusted-secondary-color:calc(var(--secondary-hue)*var(--contrast-factor));

[0156] Example 2: When the target object's system is set to enhance contrast, the media query rule @media(prefers-contrast:more) is used to obtain the query method for enhancing contrast. The specific code is as follows:

[0157] @media(prefers-contrast:more){

[0158] :root{

[0159] ...some default variables in high contrast

[0160] }

[0161] body{

[0162] …some default styles in high contrast

[0163] }

[0164] }

[0165] Example 3: After confirming that the target object's device has saved the accessibility preference settings, use the matchMedia API in JavaScript to actively query the target object's system-level settings and determine whether the target object has enabled the enhanced contrast mode prefers-contrast:more. To ensure that any changes in the accessibility preference settings can be responded to in real time, set a listener for the prefers-contrast property.

[0166] When the enhanced contrast preference in the accessibility preferences changes, the listener can immediately detect and trigger the corresponding processing function. For example: if the listener finds that the target object has turned on enhanced contrast in the accessibility preferences, the listener will change the value of the CSS variable --contrast-factor to 1.2, and at the same time, adjust the hue value of the main color to 220. This adjustment is intended to increase the contrast between the colors of the browsing page to meet the needs of the target object with visual impairments. The specific code is as follows:

[0167] / / Find related attributes

[0168] const prefersContrast=window.matchMedia('(prefers-contrast:more)');

[0169] / / Add a listener to detect changes in user settings

[0170] prefersContrast.addEventListener('change',listener method);

[0171] document.documentElement.style.setProperty('--contrast-factor','1.2');

[0172] document.documentElement.style.setProperty('--primary-hue',"220");

[0173] Going a step further, the listener can also start or display interactive components, allowing the target object to customize the accessibility settings in more detail. For example, a dialog box pops up where the target object can adjust the contrast, font size, or choose a color mode to suit personal visual preferences. These settings will be reflected in real time through CSS variables and page styles to ensure instant adjustment of the browsing interface. In order to improve the convenience of the target object's next visit, the listener will cache the current accessibility preferences to the device.

[0174] Example 4: If the target object's accessibility preferences no longer match the enhanced contrast mode, or the target object actively changes these accessibility preferences, the listener will restore the CSS variable --contrast-factor to the default value of 1, and will also reset other affected settings. If the target object has enabled accessibility preferences that reduce animation and displacement effects, the listener will immediately capture the change in accessibility preferences and change the value of the CSS variable. The specific code is as follows:

[0175] / / Find related attributes

[0176] const reducedMotion=window.matchMedia('(prefers-reduced-motion:reduce)');

[0177] / / Add a listener to detect changes in user settings

[0178] reducedMotion.addEventListener('change',listener method);

[0179] / / Set animation-related CSS variables and the degree of change

[0180] --animation-duration: 2s / *Default animation time* /

[0181] --animation-factor:1 / *Animation base value* /

[0182] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, an operating terminal, or a network device, etc.) to execute the methods of each embodiment of the present application.

[0183] Figure 4 is a structural block diagram of a browsing page modification device according to an embodiment of the present application; Figure 4 As shown, including:

[0184] A first determination module 40 is used to determine whether the accessibility preference setting of the target object is cached in the device through a scripting language of the device;

[0185] A second determination module 42 is configured to determine, if it is determined that the accessibility preference setting is cached in the device, whether the accessibility preference setting complies with a media query rule of the device through a media interface in the scripting language;

[0186] A modification module 44 is used to adjust the style variables in the scripting language according to the accessibility preference settings to modify the browsing page of the device when the accessibility preference settings comply with the media query rules, wherein the style variables are defined in a root selector covering the entire scripting language.

[0187] In an embodiment of the present application, a device's scripting language is used to determine whether the target object's accessibility preference settings are cached in the device; if it is determined that the accessibility preference settings are cached in the device, a media interface in the scripting language is used to determine whether the accessibility preference settings comply with the device's media query rules; if the accessibility preference settings comply with the media query rules, the style variables in the scripting language are adjusted according to the accessibility preference settings to modify the device's browsing page, wherein the style variables are defined in a root selector covering the entire scripting language. The above technical solution solves the problem in the related art that the modification of the accessible browsing page needs to be implemented specifically in each code, resulting in an overly cumbersome modification process.

[0188] In an optional embodiment, the modification module 44 is further used to obtain the accessibility preference settings of the target object cached in the device; determine the corresponding style variables in the scripting language and the target values ​​that need to be adjusted for the style variables according to the accessibility preference settings; and replace the initial values ​​of the style variables with the target values.

[0189] In an optional embodiment, the second determination module 42 is further used to query the display settings of the device through the media interface, wherein the display settings include at least one of the following: screen size, screen resolution, screen orientation, contrast preference, and color theme mode; define corresponding media query rules according to the display settings, and define the sample variables according to the media query rules.

[0190] In an optional embodiment, the second determination module 42 is further used to identify, when the target object turns on the accessibility function of the device, a target setting corresponding to the accessibility function from the accessibility preference setting through the media interface, wherein the accessibility function is used to instruct the script language to modify the browsing page; determine the corresponding media query rule from the device according to the target setting, and determine whether the target setting complies with the media query rule through the media interface.

[0191] In an optional embodiment, the first determination module 40 is further used to, when it is determined that the accessibility preference setting is not cached in the device, display the browsing page according to the default setting and add a listener in the browsing page, wherein the listener is used to detect changes in the accessibility preference setting, and the default setting refers to the style variables included in the device in the initial state; when the listener detects that the accessibility preference setting has changed, obtain new accessibility preference setting.

[0192] In an optional embodiment, the first determination module 40 is further used to adjust the corresponding style variables in the scripting language according to the new accessibility preference settings to modify the browsing page when the new accessibility preference settings comply with the media query rules, and store the new accessibility preference settings in the device.

[0193] In an optional embodiment, the second determination module 42 is further configured to display the browsing page according to a default setting when the accessibility preference setting does not comply with the media query rule, wherein the default setting refers to a style variable initially included in the device.

[0194] An embodiment of the present application further provides a storage medium, which includes a stored program, wherein the program executes any of the above methods when it is run.

[0195] Optionally, in this embodiment, the storage medium may be configured to store program codes for executing the following steps:

[0196] S1, determining, by means of a scripting language of the device, whether accessibility preference settings of a target object are cached in the device;

[0197] S2, when it is determined that the accessibility preference setting is cached in the device, determining whether the accessibility preference setting complies with a media query rule of the device through a media interface in the scripting language;

[0198] S3: When the accessibility preference setting complies with the media query rule, adjust the style variables in the scripting language according to the accessibility preference setting to modify the browsing page of the device, wherein the style variables are defined in a root selector covering the entire scripting language.

[0199] An embodiment of the present application further provides an electronic device, including a memory and a processor, wherein a computer program is stored in the memory, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.

[0200] Optionally, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor, and the input / output device is connected to the processor.

[0201] Optionally, in this embodiment, the processor may be configured to perform the following steps through a computer program:

[0202] S1, determining, by means of a scripting language of the device, whether accessibility preference settings of a target object are cached in the device;

[0203] S2, when it is determined that the accessibility preference setting is cached in the device, determining whether the accessibility preference setting complies with a media query rule of the device through a media interface in the scripting language;

[0204] S3: When the accessibility preference setting complies with the media query rule, adjust the style variables in the scripting language according to the accessibility preference setting to modify the browsing page of the device, wherein the style variables are defined in a root selector covering the entire scripting language.

[0205] Optionally, in this embodiment, the above-mentioned storage medium may include but is not limited to: a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk or an optical disk, and other media that can store program codes.

[0206] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps in any one of the above method embodiments are implemented.

[0207] An embodiment of the present application further provides another computer program product, including a non-volatile computer-readable storage medium, wherein the non-volatile computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in any of the above method embodiments are implemented.

[0208] The embodiments of the present application also provide a computer program, which includes computer instructions, which are stored in a computer-readable storage medium; a processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device performs the steps in any one of the above method embodiments.

[0209] Optionally, the specific examples in this embodiment may refer to the examples described in the above embodiments and optional implementation modes, and this embodiment will not be described in detail here.

[0210] Obviously, those skilled in the art should understand that the above modules or steps of the present application can be implemented by a general computing device, they can be concentrated on a single computing device, or distributed on a network composed of multiple computing devices, and optionally, they can be implemented by a program code executable by a computing device, so that they can be stored in a storage device and executed by the computing device, and in some cases, the steps shown or described can be executed in a different order from that herein, or they can be made into individual integrated circuit modules, or multiple modules or steps therein can be made into a single integrated circuit module for implementation. Thus, the present application is not limited to any specific combination of hardware and software.

[0211] The above is only a preferred implementation of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A method for modifying a browsing page, characterized in that: include: Determining, by a scripting language of the device, whether accessibility preference settings of the target object are cached in the device; In a case where it is determined that the accessibility preference setting is cached in the device, determining whether the accessibility preference setting complies with the media query rule of the device through the media interface in the scripting language; and in a case where the accessibility preference setting complies with the media query rule, adjusting the style variables in the scripting language according to the accessibility preference setting to modify the browsing page of the device, wherein the style variables are defined in a root selector covering the entire scripting language.

2. The method for modifying a browsing page according to claim 1, characterized in that: Adjusting style variables in the scripting language according to the accessibility preference setting includes: Obtaining accessibility preference settings of the target object cached in the device; Determining, according to the accessibility preference setting, a corresponding style variable in the scripting language and a target value that needs to be adjusted for the style variable; Replace the initial value of the style variable with the target value.

3. The method for modifying a browsing page according to claim 1, characterized in that: Before determining whether the accessibility preference setting complies with the media query rule of the device through the media interface in the scripting language, the method further includes: querying display settings of the device through the media interface, wherein the display settings include at least one of the following: screen size, screen resolution, screen orientation, contrast preference, and color theme mode; A corresponding media query rule is defined according to the display setting, and the sample variable is defined according to the media query rule.

4. The method for modifying a browsing page according to claim 1, characterized in that: Determining whether the accessibility preference setting complies with the media query rule of the device through the media interface in the scripting language includes: In a case where the target object turns on an accessibility function of the device, identifying, through the media interface, a target setting corresponding to the accessibility function from the accessibility preference setting, wherein the accessibility function is used to instruct the scripting language to modify the browsing page; A corresponding media query rule is determined from the device according to the target setting, and whether the target setting complies with the media query rule is determined through the media interface.

5. The method for modifying a browsing page according to claim 1, characterized in that: After determining whether the accessibility preference setting of the target object is cached in the device through the scripting language of the device, the method further includes: In the case where it is determined that the accessibility preference setting is not cached in the device, displaying the browsing page according to a default setting, and adding a listener to the browsing page, wherein the listener is used to detect changes in the accessibility preference setting, and the default setting refers to a style variable initially included in the device; When the listener detects that the accessibility preference setting has changed, a new accessibility preference setting is obtained.

6. The method for modifying a browsing page according to claim 5, characterized in that: After obtaining the new accessibility preference setting, the method further includes: In a case where the new accessibility preference setting complies with the media query rule, the corresponding style variables in the scripting language are adjusted according to the new accessibility preference setting to modify the browsing page, and the new accessibility preference setting is stored in the device.

7. The method for modifying a browsing page according to claim 1, characterized in that: After determining whether the accessibility preference setting complies with the media query rule of the device through the media interface in the scripting language, the method further includes: In the case where the accessibility preference setting does not comply with the media query rule, the browsing page is displayed according to a default setting, wherein the default setting refers to a style variable initially included in the device.

8. A device for modifying a browsing page, characterized in that: include: A first determination module, configured to determine, by using a scripting language of the device, whether an accessibility preference setting of a target object is cached in the device; A second determination module is configured to determine, if it is determined that the accessibility preference setting is cached in the device, whether the accessibility preference setting complies with a media query rule of the device through a media interface in the scripting language; A modification module is used to adjust the style variables in the scripting language according to the accessibility preference settings to modify the browsing page of the device when the accessibility preference settings comply with the media query rules, wherein the style variables are defined in a root selector covering the entire scripting language.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium includes a stored program, wherein the program executes the method described in any one of claims 1 to 7 when executed.

10. An electronic device comprising a memory and a processor, characterized in that: A computer program is stored in the memory, and the processor is configured to execute the method according to any one of claims 1 to 7 through the computer program.

Images