1.本技术涉及前端开发和网页自适应的
技术领域：
：，具体而言，涉及一种网页自适应方法、装置、电子设备及存储介质。
背景技术：
：：2.目前，针对网页页面进行自适应的方法大都是采用绝对定位、相对定位和固定定位等等单一定位方法，导致网页中被缩小且出现滚动操作后的标题栏或者导航栏超出显示范围，具体例如：在实践过程中发现，在网页页面缩小之后，先纵向滚动再横向滚动，就无法找到网页页面中的标题栏右边的登录按钮。也就是说，目前的网页页面中的标题栏的自适应效果较差。技术实现要素：3.本技术实施例的目的在于提供一种网页自适应方法、装置、电子设备及存储介质，用于改善网页页面中的标题栏的自适应效果较差的问题。4.本技术实施例提供了一种网页自适应方法，包括：通过浏览器接收服务器发送的响应页面，响应页面包括：元素模块；若响应页面中出现纵向滚动操作，则控制元素模块固定在浏览器的相对位置；若响应页面中出现横向滚动操作，则控制元素模块随着响应页面的滚动而移动。在上述的实现过程中，通过在响应页面中出现纵向滚动操作时，则控制元素模块固定在浏览器的相对位置；且在响应页面中出现横向滚动操作时，则控制元素模块随着响应页面的滚动而移动。也就是说，通过根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，便于被人点击使用，增加了网页页面的自适应效果。5.可选地，在本技术实施例中，控制元素模块固定在浏览器的相对位置，包括：将元素模块的定位属性设置为固定定位，以使元素模块固定在浏览器的相对位置，不随着响应页面的滚动而移动。在上述的实现过程中，通过将元素模块的定位属性设置为固定定位，以使元素模块固定在浏览器的相对位置，不随着响应页面的滚动而移动，从而使得用户在纵向滚动操作过程中，该元素模块的标题栏可以随时被人点击使用，增加了网页页面的自适应效果。6.可选地，在本技术实施例中，控制元素模块随着响应页面的滚动而移动，包括：将元素模块的定位属性设置为绝对定位，以使元素模块随着响应页面的滚动而移动。在上述的实现过程中，通过将元素模块的定位属性设置为绝对定位，以使元素模块随着响应页面的滚动而移动，从而使得用户在横向滚动操作过程中，该元素模块的标题栏可以随时被人点击使用，增加了网页页面的自适应效果。7.可选地，在本技术实施例中，元素模块为标题栏或者导航栏。8.本技术实施例还提供了一种网页自适应装置，包括：响应页面接收模块，用于通过浏览器接收服务器发送的响应页面，响应页面包括：元素模块；模块固定控制模块，用于若响应页面中出现纵向滚动操作，则控制元素模块固定在浏览器的相对位置；模块移动控制模块，用于若响应页面中出现横向滚动操作，则控制元素模块随着响应页面的滚动而移动。在上述的实现过程中，通过在响应页面中出现纵向滚动操作时，则控制元素模块固定在浏览器的相对位置；且在响应页面中出现横向滚动操作时，则控制元素模块随着响应页面的滚动而移动。也就是说，通过根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，便于被人点击使用，增加了网页页面的自适应效果。9.可选地，在本技术实施例中，模块固定控制模块，包括：固定定位设置模块，用于将元素模块的定位属性设置为固定定位，以使元素模块固定在浏览器的相对位置，不随着响应页面的滚动而移动。10.可选地，在本技术实施例中，模块移动控制模块，包括：绝对定位设置模块，用于将元素模块的定位属性设置为绝对定位，以使元素模块随着响应页面的滚动而移动。11.可选地，在本技术实施例中，网页自适应装置，还包括：元素模块为标题栏或者导航栏。12.本技术实施例还提供了一种电子设备，包括：处理器和存储器，存储器存储有处理器可执行的机器可读指令，机器可读指令被处理器执行时执行如上面描述的方法。13.本技术实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如上面描述的方法。附图说明14.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本技术实施例中的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。15.图1示出的本技术实施例提供的响应页面的变化过程示意图；16.图2示出的本技术实施例提供的网页自适应方法的流程示意图；17.图3示出的本技术实施例提供的网页自适应的过程示意图；18.图4示出的本技术实施例提供的网页自适应装置的结构示意图；19.图5示出的本技术实施例提供的电子设备的结构示意图。具体实施方式20.下面将结合本技术实施例中附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术实施例中的一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本技术实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本技术实施例的详细描述并非旨在限制要求保护的本技术实施例的范围，而是仅仅表示本技术实施例中的选定实施例。基于本技术实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本技术实施例保护的范围。21.在介绍本技术实施例提供的网页自适应方法之前，先介绍本技术实施例中所涉及的一些概念：22.超文本标记语言(hypertextmarkuplanguage，html)，是一种标准通用标记语言，包括一系列标签.html通过标签将网络上的文档格式统一，使分散的因特网(internet)资源连接为一个逻辑整体，html通过标记符号来标记要显示的网页中的各个部分。23.javascript是一种直译式脚本语言，又被简称为js，也是一种动态类型、弱类型、基于原型的用户终端脚本语言，也是一种广泛用于用户终端的脚本语言，最早是在html网页上使用，可以用来给html网页增加动态功能。24.前端代码(front-endcode)，是指运行于服务器向电子设备发送的且运行于电子设备上的代码，这里的前端代码通常被电子设备的浏览器所执行，这里的前端代码例如：超文本标记语言(html)代码、javascript脚本语言和层叠样式表(cascadingstylesheets，css)代码等等。25.jquery是一套跨浏览器的javascript库，简化超文本标记语言(hypertextmarkuplanguage，html)与javascript之间的操作。26.需要说明的是，本技术实施例提供的网页自适应方法可以被电子设备执行，这里的电子设备是指具有执行计算机程序功能的设备终端或者服务器，设备终端例如：智能手机、个人电脑、平板电脑、个人数字助理或者移动上网设备等。服务器是指通过网络提供计算服务的设备，服务器例如：x86服务器以及非x86服务器，非x86服务器包括：大型机、小型机和unix服务器。27.请参见图1示出的本技术实施例提供的响应页面的变化过程示意图；下面介绍该网页自适应方法的适用应用场景，这里的应用场景包括但不限于：浏览器在获取服务器发送的响应页面之后，正常大小的浏览器将响应页面进行渲染，渲染后的效果见图1(a)，该页面中包括标题栏或者导航栏，该标题栏或者导航栏中包括右侧的登录按钮；由于响应页面对应的网页内容较多，需要纵向滚动后才能展示完，因此，此时的浏览器在右侧展示纵向滚动条，且标题栏或者导航栏中能够完整的展示登录按钮。图1(b)展示了用户将窗口缩小后的效果，由于响应页面在横向上也有缩小，标题栏或者导航栏是相对于响应页面设置的固定定位(即position：fixed)方式，此时的浏览器在底部会展示横向滚动条，且标题栏或者导航栏中已经无法展示登录按钮。图1(c)展示了用户在阅读完前面页面的内容后向下纵向拖动滚动条之后的效果，由于后面的内容需要登录后查看，因此，用户向右横向拖动滚动条，试图找到登录按钮。图1(d)展示了用户在向右横向拖动滚动条之后的效果，由于标题栏或者导航栏是相对于响应页面设置的固定定位(即position:fixed)方式，用户在向右横向拖动滚动条时，标题栏或者导航栏相对于响应页面是不变的，即标题栏或者导航栏不随着横向滚动条拖动而移动。28.在上面的情况下，如果用户想要点击登录按钮，则需要向上纵向拖动滚动条。图1(e)展示了用户在向上纵向拖动滚动条之后的效果，此时的标题栏或者导航栏变为初始设置的相对定位(即position:relative)方式，此时的标题栏或者导航栏中又能够完整的展示登录按钮了。在这些应用场景中，可以使用该网页自适应方法对网络页面进行布局开发，根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，从而实现自适应响应布局的效果等。29.请参见图2示出的本技术实施例提供的网页自适应方法的流程示意图；该网页自适应方法的主要思路是，通过在响应页面中出现纵向滚动操作时，则控制元素模块固定在浏览器的相对位置；且在响应页面中出现横向滚动操作时，则控制元素模块随着响应页面的滚动而移动。也就是说，通过根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，便于被人点击使用，增加了网页页面的自适应效果。该网页自适应方法的具体可以包括：30.步骤s110：通过浏览器接收服务器发送的响应页面，响应页面包括：元素模块。31.上述步骤s110的实施方式例如：电子设备上的浏览器通过超文本传输协议(hypertexttransferprotocol，http)或者超文本传输安全协议(hypertexttransferprotocolsecure，https)接收服务器发送的响应页面，该响应页面中可以是html页面，可以嵌入有css代码和javascript代码，响应页面包括：元素模块，此处的元素模块是指html中的块级元素(例如：div和table等等)，其中，上述的元素模块可以是标题栏或者导航栏。32.请参见图3示出的本技术实施例提供的网页自适应的过程示意图；电子设备在接收到服务器发送的响应页面之后，正常大小的浏览器将响应页面进行渲染，渲染后的效果见图3(a)，该页面中包括标题栏或者导航栏，该标题栏或者导航栏中包括右侧的登录按钮；由于响应页面对应的网页内容较多，需要纵向滚动后才能展示完，因此，此时的浏览器在右侧展示纵向滚动条，且标题栏或者导航栏中能够完整的展示登录按钮。图3(b)展示了用户将窗口缩小后的效果，由于响应页面在横向上也有缩小，标题栏或者导航栏是相对于响应页面设置的固定定位(即position：fixed)方式，此时的浏览器在底部会展示横向滚动条，且标题栏或者导航栏中已经无法展示登录按钮。33.步骤s120：若响应页面中出现纵向滚动操作，则控制元素模块固定在浏览器的相对位置。34.上述步骤s120的实施方式例如：判断响应页面中是否出现纵向滚动操作，具体例如：使用javascript代码中的scrolltop函数来获取该元素模块的本次移动后的顶部位置(可以标记为aftertop)和上次移动后的顶部位置(可以标记为beforetop)；如果本次移动后的顶部位置不等于上次移动后的顶部位置，那么说明出现了纵向滚动操作，否则，说明没有出现纵向滚动操作。若响应页面中出现纵向滚动操作，则将元素模块的定位属性设置为固定定位，具体例如：假设该元素模块是div，那么可以将该div的css中的position属性值设置为fixed，具体可以使用javascript代码来实现，以使元素模块固定在浏览器的相对位置，不随着响应页面的纵向滚动而纵向移动。图3(c)展示了用户在阅读完前面页面的内容后向下纵向拖动滚动条之后的效果，由于后面的内容需要登录后查看，因此，用户向右横向拖动滚动条，试图找到登录按钮。35.可以理解的是，上述的过程使用javascript语言编写的jquery库可以表示为：if(beforetop《aftertop||beforetop》aftertop){beforetop＝aftertop；$(“div”).css(“position”:“fixed”)}；其中，beforetop表示上次移动后的顶部位置，aftertop表示本次移动后的顶部位置，beforetop＝aftertop表示将本次移动后的顶部位置赋值给上次移动后的顶部位置变量，$(“div”).css(“position”:“fixed”)表示将该div的css中的position属性值设置为fixed。36.步骤s130：若响应页面中出现横向滚动操作，则控制元素模块随着响应页面的滚动而移动。37.上述步骤s130的实施方式例如：判断响应页面中是否出现横向滚动操作，具体例如：使用javascript代码中的scrollleft函数来获取该元素模块的本次移动后的顶部位置(可以标记为afterleft)和上次移动后的顶部位置(可以标记为beforeleft)；如果本次移动后的顶部位置不等于上次移动后的顶部位置，那么说明出现了横向滚动操作，否则，说明没有出现横向滚动操作。若响应页面中出现横向滚动操作，则将元素模块的定位属性设置为绝对定位，具体例如：假设该元素模块是div，那么可以将该div的css中的position属性值设置为absolute，具体可以使用javascript代码来实现，以使元素模块随着响应页面的横向滚动而横向移动。图3(d)展示了用户在向右横向拖动滚动条之后的效果，由于标题栏或者导航栏是设置的绝对定位(即position:absolute)方式，用户在向右横向拖动滚动条时，标题栏或者导航栏相对于响应页面是相应变化的，即标题栏或者导航栏随着横向滚动条拖动而横向移动。38.可以理解的是，上述的过程使用javascript语言编写的jquery库可以表示为：if(beforeleft《afterleft||beforeleft》afterleft){beforeleft＝afterleft；$(“div”).css(“position”:“fixed”)}；其中，beforeleft表示上次移动后的左侧位置，afterleft表示本次移动后的左侧位置，beforeleft＝afterleft表示将本次移动后的左侧位置赋值给上次移动后的左侧位置变量，$(“div”).css(“position”:“absolute”)表示将该div的css中的position属性值设置为absolute。39.在上述的实现过程中，通过在响应页面中出现纵向滚动操作时，则控制元素模块固定在浏览器的相对位置；且在响应页面中出现横向滚动操作时，则控制元素模块随着响应页面的滚动而移动。也就是说，通过根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，便于被人点击使用，增加了网页页面的自适应效果。40.请参见图4示出的本技术实施例提供的网页自适应装置的结构示意图；本技术实施例提供了一种网页自适应装置200，包括：41.响应页面接收模块210，用于通过浏览器接收服务器发送的响应页面，响应页面包括：元素模块。42.模块固定控制模块220，用于若响应页面中出现纵向滚动操作，则控制元素模块固定在浏览器的相对位置。43.模块移动控制模块230，用于若响应页面中出现横向滚动操作，则控制元素模块随着响应页面的滚动而移动。44.可选地，在本技术实施例中，模块固定控制模块，包括：45.固定定位设置模块，用于将元素模块的定位属性设置为固定定位，以使元素模块固定在浏览器的相对位置，不随着响应页面的滚动而移动。46.可选地，在本技术实施例中，模块移动控制模块，包括：47.绝对定位设置模块，用于将元素模块的定位属性设置为绝对定位，以使元素模块随着响应页面的滚动而移动。48.可选地，在本技术实施例中，元素模块为标题栏或者导航栏。49.应理解的是，该装置与上述的网页自适应方法实施例对应，能够执行上述方法实施例涉及的各个步骤，该装置具体的功能可以参见上文中的描述，为避免重复，此处适当省略详细描述。该装置包括至少一个能以软件或固件(firmware)的形式存储于存储器中或固化在装置的操作系统(operatingsystem，os)中的软件功能模块。50.请参见图5示出的本技术实施例提供的电子设备的结构示意图。本技术实施例提供的一种电子设备300，包括：处理器310和存储器320，存储器320存储有处理器310可执行的机器可读指令，机器可读指令被处理器310执行时执行如上的方法。51.本技术实施例还提供了一种计算机可读存储介质330，该计算机可读存储介质330上存储有计算机程序，该计算机程序被处理器310运行时执行如上的方法。52.其中，计算机可读存储介质330可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(staticrandomaccessmemory,简称sram)，电可擦除可编程只读存储器(electricallyerasableprogrammableread-onlymemory,简称eeprom)，可擦除可编程只读存储器(erasableprogrammablereadonlymemory,简称eprom)，可编程只读存储器(programmableread-onlymemory,简称prom)，只读存储器(read-onlymemory,简称rom)，磁存储器，快闪存储器，磁盘或光盘。53.本技术实施例提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其他的方式实现。以上所描述的装置实施例仅是示意性的，例如，附图中的流程图和框图显示了根据本技术实施例的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以和附图中所标注的发生顺序不同。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这主要根据所涉及的功能而定。54.另外，在本技术实施例中的各个实施例的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。55.在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。56.以上的描述，仅为本技术实施例的可选实施方式，但本技术实施例的保护范围并不局限于此，任何熟悉本
技术领域：
：的技术人员在本技术实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本技术实施例的保护范围之内。当前第1页12当前第1页12
技术领域：
：，具体而言，涉及一种网页自适应方法、装置、电子设备及存储介质。
背景技术：
：：2.目前，针对网页页面进行自适应的方法大都是采用绝对定位、相对定位和固定定位等等单一定位方法，导致网页中被缩小且出现滚动操作后的标题栏或者导航栏超出显示范围，具体例如：在实践过程中发现，在网页页面缩小之后，先纵向滚动再横向滚动，就无法找到网页页面中的标题栏右边的登录按钮。也就是说，目前的网页页面中的标题栏的自适应效果较差。技术实现要素：3.本技术实施例的目的在于提供一种网页自适应方法、装置、电子设备及存储介质，用于改善网页页面中的标题栏的自适应效果较差的问题。4.本技术实施例提供了一种网页自适应方法，包括：通过浏览器接收服务器发送的响应页面，响应页面包括：元素模块；若响应页面中出现纵向滚动操作，则控制元素模块固定在浏览器的相对位置；若响应页面中出现横向滚动操作，则控制元素模块随着响应页面的滚动而移动。在上述的实现过程中，通过在响应页面中出现纵向滚动操作时，则控制元素模块固定在浏览器的相对位置；且在响应页面中出现横向滚动操作时，则控制元素模块随着响应页面的滚动而移动。也就是说，通过根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，便于被人点击使用，增加了网页页面的自适应效果。5.可选地，在本技术实施例中，控制元素模块固定在浏览器的相对位置，包括：将元素模块的定位属性设置为固定定位，以使元素模块固定在浏览器的相对位置，不随着响应页面的滚动而移动。在上述的实现过程中，通过将元素模块的定位属性设置为固定定位，以使元素模块固定在浏览器的相对位置，不随着响应页面的滚动而移动，从而使得用户在纵向滚动操作过程中，该元素模块的标题栏可以随时被人点击使用，增加了网页页面的自适应效果。6.可选地，在本技术实施例中，控制元素模块随着响应页面的滚动而移动，包括：将元素模块的定位属性设置为绝对定位，以使元素模块随着响应页面的滚动而移动。在上述的实现过程中，通过将元素模块的定位属性设置为绝对定位，以使元素模块随着响应页面的滚动而移动，从而使得用户在横向滚动操作过程中，该元素模块的标题栏可以随时被人点击使用，增加了网页页面的自适应效果。7.可选地，在本技术实施例中，元素模块为标题栏或者导航栏。8.本技术实施例还提供了一种网页自适应装置，包括：响应页面接收模块，用于通过浏览器接收服务器发送的响应页面，响应页面包括：元素模块；模块固定控制模块，用于若响应页面中出现纵向滚动操作，则控制元素模块固定在浏览器的相对位置；模块移动控制模块，用于若响应页面中出现横向滚动操作，则控制元素模块随着响应页面的滚动而移动。在上述的实现过程中，通过在响应页面中出现纵向滚动操作时，则控制元素模块固定在浏览器的相对位置；且在响应页面中出现横向滚动操作时，则控制元素模块随着响应页面的滚动而移动。也就是说，通过根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，便于被人点击使用，增加了网页页面的自适应效果。9.可选地，在本技术实施例中，模块固定控制模块，包括：固定定位设置模块，用于将元素模块的定位属性设置为固定定位，以使元素模块固定在浏览器的相对位置，不随着响应页面的滚动而移动。10.可选地，在本技术实施例中，模块移动控制模块，包括：绝对定位设置模块，用于将元素模块的定位属性设置为绝对定位，以使元素模块随着响应页面的滚动而移动。11.可选地，在本技术实施例中，网页自适应装置，还包括：元素模块为标题栏或者导航栏。12.本技术实施例还提供了一种电子设备，包括：处理器和存储器，存储器存储有处理器可执行的机器可读指令，机器可读指令被处理器执行时执行如上面描述的方法。13.本技术实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如上面描述的方法。附图说明14.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本技术实施例中的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。15.图1示出的本技术实施例提供的响应页面的变化过程示意图；16.图2示出的本技术实施例提供的网页自适应方法的流程示意图；17.图3示出的本技术实施例提供的网页自适应的过程示意图；18.图4示出的本技术实施例提供的网页自适应装置的结构示意图；19.图5示出的本技术实施例提供的电子设备的结构示意图。具体实施方式20.下面将结合本技术实施例中附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术实施例中的一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本技术实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本技术实施例的详细描述并非旨在限制要求保护的本技术实施例的范围，而是仅仅表示本技术实施例中的选定实施例。基于本技术实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本技术实施例保护的范围。21.在介绍本技术实施例提供的网页自适应方法之前，先介绍本技术实施例中所涉及的一些概念：22.超文本标记语言(hypertextmarkuplanguage，html)，是一种标准通用标记语言，包括一系列标签.html通过标签将网络上的文档格式统一，使分散的因特网(internet)资源连接为一个逻辑整体，html通过标记符号来标记要显示的网页中的各个部分。23.javascript是一种直译式脚本语言，又被简称为js，也是一种动态类型、弱类型、基于原型的用户终端脚本语言，也是一种广泛用于用户终端的脚本语言，最早是在html网页上使用，可以用来给html网页增加动态功能。24.前端代码(front-endcode)，是指运行于服务器向电子设备发送的且运行于电子设备上的代码，这里的前端代码通常被电子设备的浏览器所执行，这里的前端代码例如：超文本标记语言(html)代码、javascript脚本语言和层叠样式表(cascadingstylesheets，css)代码等等。25.jquery是一套跨浏览器的javascript库，简化超文本标记语言(hypertextmarkuplanguage，html)与javascript之间的操作。26.需要说明的是，本技术实施例提供的网页自适应方法可以被电子设备执行，这里的电子设备是指具有执行计算机程序功能的设备终端或者服务器，设备终端例如：智能手机、个人电脑、平板电脑、个人数字助理或者移动上网设备等。服务器是指通过网络提供计算服务的设备，服务器例如：x86服务器以及非x86服务器，非x86服务器包括：大型机、小型机和unix服务器。27.请参见图1示出的本技术实施例提供的响应页面的变化过程示意图；下面介绍该网页自适应方法的适用应用场景，这里的应用场景包括但不限于：浏览器在获取服务器发送的响应页面之后，正常大小的浏览器将响应页面进行渲染，渲染后的效果见图1(a)，该页面中包括标题栏或者导航栏，该标题栏或者导航栏中包括右侧的登录按钮；由于响应页面对应的网页内容较多，需要纵向滚动后才能展示完，因此，此时的浏览器在右侧展示纵向滚动条，且标题栏或者导航栏中能够完整的展示登录按钮。图1(b)展示了用户将窗口缩小后的效果，由于响应页面在横向上也有缩小，标题栏或者导航栏是相对于响应页面设置的固定定位(即position：fixed)方式，此时的浏览器在底部会展示横向滚动条，且标题栏或者导航栏中已经无法展示登录按钮。图1(c)展示了用户在阅读完前面页面的内容后向下纵向拖动滚动条之后的效果，由于后面的内容需要登录后查看，因此，用户向右横向拖动滚动条，试图找到登录按钮。图1(d)展示了用户在向右横向拖动滚动条之后的效果，由于标题栏或者导航栏是相对于响应页面设置的固定定位(即position:fixed)方式，用户在向右横向拖动滚动条时，标题栏或者导航栏相对于响应页面是不变的，即标题栏或者导航栏不随着横向滚动条拖动而移动。28.在上面的情况下，如果用户想要点击登录按钮，则需要向上纵向拖动滚动条。图1(e)展示了用户在向上纵向拖动滚动条之后的效果，此时的标题栏或者导航栏变为初始设置的相对定位(即position:relative)方式，此时的标题栏或者导航栏中又能够完整的展示登录按钮了。在这些应用场景中，可以使用该网页自适应方法对网络页面进行布局开发，根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，从而实现自适应响应布局的效果等。29.请参见图2示出的本技术实施例提供的网页自适应方法的流程示意图；该网页自适应方法的主要思路是，通过在响应页面中出现纵向滚动操作时，则控制元素模块固定在浏览器的相对位置；且在响应页面中出现横向滚动操作时，则控制元素模块随着响应页面的滚动而移动。也就是说，通过根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，便于被人点击使用，增加了网页页面的自适应效果。该网页自适应方法的具体可以包括：30.步骤s110：通过浏览器接收服务器发送的响应页面，响应页面包括：元素模块。31.上述步骤s110的实施方式例如：电子设备上的浏览器通过超文本传输协议(hypertexttransferprotocol，http)或者超文本传输安全协议(hypertexttransferprotocolsecure，https)接收服务器发送的响应页面，该响应页面中可以是html页面，可以嵌入有css代码和javascript代码，响应页面包括：元素模块，此处的元素模块是指html中的块级元素(例如：div和table等等)，其中，上述的元素模块可以是标题栏或者导航栏。32.请参见图3示出的本技术实施例提供的网页自适应的过程示意图；电子设备在接收到服务器发送的响应页面之后，正常大小的浏览器将响应页面进行渲染，渲染后的效果见图3(a)，该页面中包括标题栏或者导航栏，该标题栏或者导航栏中包括右侧的登录按钮；由于响应页面对应的网页内容较多，需要纵向滚动后才能展示完，因此，此时的浏览器在右侧展示纵向滚动条，且标题栏或者导航栏中能够完整的展示登录按钮。图3(b)展示了用户将窗口缩小后的效果，由于响应页面在横向上也有缩小，标题栏或者导航栏是相对于响应页面设置的固定定位(即position：fixed)方式，此时的浏览器在底部会展示横向滚动条，且标题栏或者导航栏中已经无法展示登录按钮。33.步骤s120：若响应页面中出现纵向滚动操作，则控制元素模块固定在浏览器的相对位置。34.上述步骤s120的实施方式例如：判断响应页面中是否出现纵向滚动操作，具体例如：使用javascript代码中的scrolltop函数来获取该元素模块的本次移动后的顶部位置(可以标记为aftertop)和上次移动后的顶部位置(可以标记为beforetop)；如果本次移动后的顶部位置不等于上次移动后的顶部位置，那么说明出现了纵向滚动操作，否则，说明没有出现纵向滚动操作。若响应页面中出现纵向滚动操作，则将元素模块的定位属性设置为固定定位，具体例如：假设该元素模块是div，那么可以将该div的css中的position属性值设置为fixed，具体可以使用javascript代码来实现，以使元素模块固定在浏览器的相对位置，不随着响应页面的纵向滚动而纵向移动。图3(c)展示了用户在阅读完前面页面的内容后向下纵向拖动滚动条之后的效果，由于后面的内容需要登录后查看，因此，用户向右横向拖动滚动条，试图找到登录按钮。35.可以理解的是，上述的过程使用javascript语言编写的jquery库可以表示为：if(beforetop《aftertop||beforetop》aftertop){beforetop＝aftertop；$(“div”).css(“position”:“fixed”)}；其中，beforetop表示上次移动后的顶部位置，aftertop表示本次移动后的顶部位置，beforetop＝aftertop表示将本次移动后的顶部位置赋值给上次移动后的顶部位置变量，$(“div”).css(“position”:“fixed”)表示将该div的css中的position属性值设置为fixed。36.步骤s130：若响应页面中出现横向滚动操作，则控制元素模块随着响应页面的滚动而移动。37.上述步骤s130的实施方式例如：判断响应页面中是否出现横向滚动操作，具体例如：使用javascript代码中的scrollleft函数来获取该元素模块的本次移动后的顶部位置(可以标记为afterleft)和上次移动后的顶部位置(可以标记为beforeleft)；如果本次移动后的顶部位置不等于上次移动后的顶部位置，那么说明出现了横向滚动操作，否则，说明没有出现横向滚动操作。若响应页面中出现横向滚动操作，则将元素模块的定位属性设置为绝对定位，具体例如：假设该元素模块是div，那么可以将该div的css中的position属性值设置为absolute，具体可以使用javascript代码来实现，以使元素模块随着响应页面的横向滚动而横向移动。图3(d)展示了用户在向右横向拖动滚动条之后的效果，由于标题栏或者导航栏是设置的绝对定位(即position:absolute)方式，用户在向右横向拖动滚动条时，标题栏或者导航栏相对于响应页面是相应变化的，即标题栏或者导航栏随着横向滚动条拖动而横向移动。38.可以理解的是，上述的过程使用javascript语言编写的jquery库可以表示为：if(beforeleft《afterleft||beforeleft》afterleft){beforeleft＝afterleft；$(“div”).css(“position”:“fixed”)}；其中，beforeleft表示上次移动后的左侧位置，afterleft表示本次移动后的左侧位置，beforeleft＝afterleft表示将本次移动后的左侧位置赋值给上次移动后的左侧位置变量，$(“div”).css(“position”:“absolute”)表示将该div的css中的position属性值设置为absolute。39.在上述的实现过程中，通过在响应页面中出现纵向滚动操作时，则控制元素模块固定在浏览器的相对位置；且在响应页面中出现横向滚动操作时，则控制元素模块随着响应页面的滚动而移动。也就是说，通过根据网页的滚动方式来确定网页中标题栏的定位方式，从而让标题栏中右边的登录按钮在网页缩小后，仍然可以让标题栏中的登录按钮随着内容滚动，便于被人点击使用，增加了网页页面的自适应效果。40.请参见图4示出的本技术实施例提供的网页自适应装置的结构示意图；本技术实施例提供了一种网页自适应装置200，包括：41.响应页面接收模块210，用于通过浏览器接收服务器发送的响应页面，响应页面包括：元素模块。42.模块固定控制模块220，用于若响应页面中出现纵向滚动操作，则控制元素模块固定在浏览器的相对位置。43.模块移动控制模块230，用于若响应页面中出现横向滚动操作，则控制元素模块随着响应页面的滚动而移动。44.可选地，在本技术实施例中，模块固定控制模块，包括：45.固定定位设置模块，用于将元素模块的定位属性设置为固定定位，以使元素模块固定在浏览器的相对位置，不随着响应页面的滚动而移动。46.可选地，在本技术实施例中，模块移动控制模块，包括：47.绝对定位设置模块，用于将元素模块的定位属性设置为绝对定位，以使元素模块随着响应页面的滚动而移动。48.可选地，在本技术实施例中，元素模块为标题栏或者导航栏。49.应理解的是，该装置与上述的网页自适应方法实施例对应，能够执行上述方法实施例涉及的各个步骤，该装置具体的功能可以参见上文中的描述，为避免重复，此处适当省略详细描述。该装置包括至少一个能以软件或固件(firmware)的形式存储于存储器中或固化在装置的操作系统(operatingsystem，os)中的软件功能模块。50.请参见图5示出的本技术实施例提供的电子设备的结构示意图。本技术实施例提供的一种电子设备300，包括：处理器310和存储器320，存储器320存储有处理器310可执行的机器可读指令，机器可读指令被处理器310执行时执行如上的方法。51.本技术实施例还提供了一种计算机可读存储介质330，该计算机可读存储介质330上存储有计算机程序，该计算机程序被处理器310运行时执行如上的方法。52.其中，计算机可读存储介质330可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(staticrandomaccessmemory,简称sram)，电可擦除可编程只读存储器(electricallyerasableprogrammableread-onlymemory,简称eeprom)，可擦除可编程只读存储器(erasableprogrammablereadonlymemory,简称eprom)，可编程只读存储器(programmableread-onlymemory,简称prom)，只读存储器(read-onlymemory,简称rom)，磁存储器，快闪存储器，磁盘或光盘。53.本技术实施例提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其他的方式实现。以上所描述的装置实施例仅是示意性的，例如，附图中的流程图和框图显示了根据本技术实施例的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以和附图中所标注的发生顺序不同。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这主要根据所涉及的功能而定。54.另外，在本技术实施例中的各个实施例的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。55.在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。56.以上的描述，仅为本技术实施例的可选实施方式，但本技术实施例的保护范围并不局限于此，任何熟悉本
技术领域：
：的技术人员在本技术实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本技术实施例的保护范围之内。当前第1页12当前第1页12
再多了解一些
本文用于企业家、创业者技术爱好者查询，结果仅供参考。
